Ive got a very basic WordPress website using the new 2017 theme and I'm trying to embed a simple video. The video is on OneDrive, but it should be the same as YouTube or any other source, and I can play the video fine in a plain HTML page.
When I insert the following HTML iframe in my post:
<iframe src="https://onedrive.live.com/embed?cid=3F3E866DF352275A&resid=3F3E866DF352275A%21106&authkey=ADg-86mHmhzI3mw" width="320" height="180" frameborder="0" scrolling="no" allowfullscreen></iframe>
It shows a small blank frame for a few seconds when I preview the post, then it jumps to the onedrive embedded link showing the video full screen, so you cant see the post.
I tried using a plugin too and that didn't work either, somehow it had the same problem. I was using FV player which seems to be very popular but when I try to embed this video it says there "Video Issues". I know there's nothing wrong with the video because, again, I can insert this iframe in a plain HTML page and it works no problem. Only when I embed the iframe in a wordpress post does it pop out into the onedrive link and go full screen.
Any suggestions? This should just work and I don't know what I'm missing.
src="https://onedrive.live.com/embed?cid=3F3E866DF352275A&resid=3F3E866DF352275A%21106&authkey=ADg-86mHmhzI3mw"
replace the embed with download. and use normal video tag instead of iframe.
src="https://onedrive.live.com/download?cid=3F3E866DF352275A&resid=3F3E866DF352275A%21106&authkey=ADg-86mHmhzI3mw"
Related
Long time lurker, first time poster. Please be gentle.
I am trying to get some vimeo videos running within a fancybox gallery. I've followed what I think are the instructions, my HTML looks like this:
class="iframe" href="'https://player.vimeo.com/video/xxxxxxx'"
When I open the link, the fancybox opens fine but shows a black box.
If I inspect the page, I see this:
iframe id="fancybox-frame1655194956187" name="fancybox-frame1655194956187" class="fancybox-iframe" allowfullscreen="allowfullscreen" allow="autoplay; fullscreen" src="//player.vimeo.com/video/xxxxxxx?autoplay=1&hd=1&show_title=1&show_byline=1&show_portrait=0&fullscreen=1&h=xxxxxxx" scrolling="no"></iframe
What I think is intersting is the 'src=' bit which seems to be stripping "https:" from the src. If I manually edit that element in the browser, everything works fine.
Further, if I substitute a Vimeo video for a Youtube one, it works fine.
Any tips are greatly appreciated!
Thanks.
My Youtube embed appears in Chrome and Firefox, but it doesn't appear in Safari (which includes mobile Safari on the iPhone). I get the same result using Vimeo or native HTML5 video - nothing appears in this div. Here's a 1-minute video that shows exactly what's happening:
https://www.youtube.com/watch?v=YnqDlmYOKW8
I tried z-index, position, changing the width and height of the iFrame, changing https to http, removing encrypted-media in the embed code, and so much more.
The website is https://waltrib.com/shop/ and the test product is "Heavy Dirt". I'm using a plugin called Booster Wordpress that allows me to change product images into custom HTML (so I'm using it for Youtube embeds).
At 0:48 in the video above - what's bizarre is that when I open the Developer Inspector and add anything like www then the iFrame appears. Weird. When browsing in Safari, it renders Youtube embeds on every single page of the website, except for the /shop page.
I read this stackoverflow which suggests using object but that didn't work.
Has anything seen a bug like this? It's one of the strangest things I've seen recently.
Instead of :
src="https://youtube.com/embed/5i9SzaumaRg"
Use:
src="https://www.youtube.com/embed/5i9SzaumaRg" // Note the "www"
Sounds silly, but works.
Update:
It seems a change in URL of any kind refreshes the iframe and hence it appears so following would work:
let i = document.getElementsByTagName("iframe")[0];
i.setAttribute("src",i.getAttribute("src")+"?r=4535");
Execute this code only after iframe is loaded. Use load handler for that.
Try adding parameters to iFrame src link:
<iframe src="https://youtube.com/embed/5i9SzaumaRg?enablejsapi=1&origin=https://example.com/" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
More on my answer here.
Please advise on how to make Youtube video embedded inside iframe accessible
Find your video on YouTube and go to Share>Embed copy the code.
You code should look like this:
<iframe src="https://www.youtube.com/embed/your-video-code"></iframe>
A few days ago, I converted my website to https. I had many problems but they are solved. But the last problem I have is, youtube videos don't work anymore as a popup with prettyphoto, I get nothing but a black or white screen. When i inspect the pop-up the iframe from youtube load over HTTP, instead of https.
<a href="https://www.youtube.com/watch?v=#" dat-rel="prettyPhoto[product-gallery]" title="My YouTube Video">
<img src="https://img.youtube.com/vi/#/default.jpg" alt="YouTube" width="50">
</a>
Is anyone familiar with this problem? Or does anyone have a function for my WordPress website so every iframe I have load over https instead of HTTP?
prettyPhoto defaults to only using http for its iframe video links. The issue is that if your site is secure, then it won't load the insecure content.
The problem is also described, with a couple solutions and one attempt to merge, on its github page: https://github.com/scaron/prettyphoto/issues/156
Given version 3.1.6 unminified, a quick fix is to edit the prettyPhoto.js file and simply add an s after the http, as there's nothing wrong with loading secure content from any context. Edit it around line 282 and 297 (one is for youtube, one is for vimeo).
Line 282, edited:
movie = 'https://www.youtube.com/embed/'+movie_id;
Line 297, edited:
movie = 'https://player.vimeo.com/video/'+ match[3] +'?title=0&byline=0&portrait=0';
Alternative Solution For PrettyPhoto + Youtube/Vimeo Videos
It is pretty clear that this post is several years old - however, I will post this alternative solution regarding the issue with PrettyPhoto not displaying video content ( such as Youtube + Vimeo ), in the hope that others who are experiencing this issue can use this solution.
After having scoured the web and every forum in search for a solution on how to make Youtube + Vimeo videos display within the PrettyPhoto modal - and after having revised the javascript innumerable times with no results, I tried a solution which already exists within PrettyPhoto: Using the iFrame.
Once your Youtube or Vimeo videos are used within the manner depicted below, they will open ( you could resize the iFrame to your specifications, since it is set to display at 100% width ) :
Your Youtube Video
You could also use an image for the cover or a thumbnail as well :
<img src="https://assets.entrepreneur.com/content/3x2/2000/20180117155526-youtube.jpeg" width="700" height="400" alt="View Youtube Video"/>
I hope this will help anyone who is still using PrettyPhoto.
I am having a website.
I want it to be displayed as an Iframe on my partner site.
<iframe src="http://www.mywebsite.com"></iframe>
However, when he try to see it, nothing is showing up, blank page, but if he change the same iframe source to youtube for example, he got the videos.
Very strange, any idea where the problem is coming from ?
Cheers