Question 166115 in Wordpress Question posted in
The official Wordpress documentation can be found here.

Does WordPress iFrame embed not appear in Safari for Youtube videos?

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.

Tags:

2

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search