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.
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.
I've been looking to use various Youtube video plugins on my Wordpress site in order to be able to automatically make the videos responsive.
Using the standard iframe embed code from Youtube will display the videos fine. Proper paragraph is added relative to the text below. This happens automatically. So, when I use or to display images or videos, all is fine with proper paragraph.
Strangely though, if I use brackets/shortcode or to display image or video, paragraph is not respected.
I tried this on my other page which uses the same theme and the same page builder and all works well there, so obviously something is broken on my site.
For me this is like looking for a needle in a haystack, but I have tried disabling the plugins one by one which did not help. I've also tried to look in my child theme css where I do the changes, but could not see anything directly that seemed related to this.
Any suggestions what else I could try?
Very strange. I uploaded the video in all three formats: .mp4, .ogv & .webm. It just won't play in chrome. In Safari and Firefox, it works just fine. The strange part is: it used to work fine until yesterday and it still works fine if you click on another link on my site and then go back.
I'm using the Salient theme on WordPress.
Link to the site
Does anyone have an idea why?
It's due to Chrome's new autoplay policy - it will not autoplay videos on first load unless the video is muted. Can you add 'muted' to the video attributes?
Source: https://developers.google.com/web/updates/2017/09/autoplay-policy-changes
Edit: there should be a 'Mute Video' option in the Video Background settings of your row.
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
Well, try this on fiddle :
<iframe allowtransparency="true" frameborder="0" scrolling="no" src="//platform.twitter.com/widgets/tweet_button.html?url= http://www.youtube.com/watch?v=vabnZ9-ex7o" style="width:100px; height:32px;"></iframe>
when you OPEN the page you will see "0" on twitter. But, if you "run it" (on fiddle) it will show "24". Why? And How can I fix it?
To me is seems like a connection issue. As you click the fiddle the first time, you get the same behavior as you experience on Twitter. However, when you click run to update, it works the way it should.
... and what exactly do you mean by OPEN?
edit:
The IFrame uses the referral url. If you take a look at JSFiddle, the counter links to how many have shared the page where the IFrame is present. Instead of the YouTube url you provide using the src attribute.
This makes sense when you think of the actual use of the Tweet-button.
But it is still a bit odd, that the count it shows on JSFiddle refers to the YouTube link you provided and not JSFiddle.
However, if you do remove the YouTube link you can in fact see the counter change to how many who's shared JSFiddle's display page.
This confirms, that providing a external source to the IFrame is not a decent way of making this work.
If this is necessary, the button must be created using the anchor element instead of using IFrame.
See this https://dev.twitter.com/docs/tweet-button