Tabs are glitchy for videos in Chrome

Hi Heather,

I think I know what’s going on. As a temporary workaround, and to hopefully prove the issue, please try the following:

• Edit the page on which the error is occurring,
• In the editor, if you’re currently in the “Visual” editor then please click on the “Text” tab on the top right hand side of the editor box,
• Find the tabs that contain the YouTube video,
• Before each of the <iframe ...> tags please add a <div> as shown below,
• After each of the <iframe ...> tags please add a </div> as shown below,
• When you’re finished editing, if you usually use the visual editor, please click the “Visual” tab again,
• Update the page and test.

You should end up with something that looks a little like this:

[tab title="Morning Worship"]
<div>
<iframe src="https://www.youtube.com/embed/videoseries?list=PLCUQKHK3gr4FsSxoa1b-Ckiov7xRTWq0q" height="364" width="640" allowfullscreen="" frameborder="0"></iframe>
</div>
[/tab]

Please make sure you do this for all of the <iframe ...> tags. Please test the page with the extra markup and see if that helps. If it fixes your problem then please let me know so that I can include a fix that does this for you in the next version of the plugin.

Hi Matt,

Thanks so much for your response and suggestion. Unfortunately, it didn’t fix the problem. I’m still seeing the problem where if one video is playing and I switch tabs, sometimes the wrong video appears in the new tab. Still only seems to happen in Chrome.

Heather

Hi Heather,

I’m sorry that didn’t fix the problem. It’s a really weird issue, I can see the bug on your website, but when I try to replicate it elsewhere I don’t see any issue, I’ve even tried replicating every piece of JS and CSS on your site in a jsfiddle session and the issue doesn’t seem to occur there, so I’m a bit puzzled.

As I can’t replicate the bug in an environment that I can control I can’t give you any firm answers as to what is causing it or how to go about fixing it, but I suspect that the issue might be resolved with a minor YouTube z-index fix.

Please try adding &wmode=transparent to the URL of the iframes, and wmode="opaque" as an attribute to the iframe. You should end up with this for the first video:

<iframe src="https://www.youtube.com/embed/videoseries?list=PLCUQKHK3gr4FsSxoa1b-Ckiov7xRTWq0q&wmode=transparent" height="364" width="640" allowfullscreen="" frameborder="0" wmode="opaque"></iframe>

Oh and you need to make sure you add that to ALL of the iframes… Please give it a go and let me know if it helps.

I think that worked! I just implemented the code you suggested and my test in Chrome shows it working. Thanks so much! I’ll do some testing on a few other platforms, but so far so good. I really appreciate the help!!!

It definitely looks a lot happier now! I’ll update the docs as soon as I get time to include a section on embedding YouTube videos, thanks for bringing the issue to my attention.