Videos from YouTube and Vimeo fail to render in video shortcodes

[westonruter]

I am seeing that a YouTube and Vimeo videos embedded in the in the video shortcode in a post will get an 0⨉0 iframe and so the video doesn't appear at all, even though I can appear it. I am also seeing the same thing in the Video widget for a Vimeo video, though YouTube seems fine in that case. The issue is observed in Twenty Fifteen and Twenty Sixteen, whereas the videos appear fine in Twenty Seventeen. Also, the videos all appear properly in the themes in Firefox. Chrome specifically is having trouble sizing the iframe in the two themes.

The source for my post content looks like:

Vimeo:
[video src="https://vimeo.com/108650530"][/video]

YouTube:
[video src="https://www.youtube.com/watch?v=Nl6U7UotA-M"][/video]

See also #42244 and the MediaElement.js upgrade in #39686.

[westonruter]

The iframe in Chrome looks like:

<iframe id="video-1836-1_vimeo_iframe" frameborder="0" src="https://player.vimeo.com/video/108650530?loop=0&amp;_=1" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="" data-ratio="0.5625" data-width="600" data-height="337.5" style="display: block; margin: 0px; width: 0px; height: 0px;" data-ready="true"></iframe>

Whereas in Firefox it looks like:

<iframe id="video-1836-1_vimeo_iframe" src="https://player.vimeo.com/video/108650530?loop=0&amp;_=1" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="" data-ratio="0.5625" data-width="600" data-height="337.5" style="display: block; margin: 0px; width: 600px; height: 337.5px;" data-ready="true" frameborder="0"></iframe>

Notice how the width and height vary.

@rafa8626 I recall sharing these with you previously but you weren't able to replicate the problem. Is that still the case? In Chrome in Twenty Fifteen can you replicate it?

[westonruter]

@bradyvercher Are you able to replicate the issue here?

[bradyvercher]

@westonruter I'm not able to replicate this. Those videos appear to be loading fine in the post content as well as in widgets in Twenty Sixteen and Twenty Fifteen using Chrome.

[rafa8626]

I haven’t been able to reproduce this either

[subrataemfluence]

I tested on development version (4.9-beta1-41801) locally using Firefox and Chrome on Ubuntu 14.04. But I could not reproduce the issue, even on 320px width in any of the two browsers.

However, as you have mentioned, the width and height vary for me too.

[westonruter]

I wonder what it is about my system in particular.

In Twenty Seventeen, when Vimeo does play for me, I also see a strange thing where the controls for both ME.js and Vimeo both are present. Here's a video showing that: ​https://youtu.be/e7TZmF1hiSA

The Vimeo's controls shouldn't be there at all, right @rafa8626? I can see this in Chrome, Firefox, and Safari regardless of the theme.

[rafa8626]

Yes they should. There's no way to hide them, unless you actively go to Vimeo and, from the Admin Panel, hide the controls. I've been asked if there's a way but it's very hacky and not recommended. So yes, seeing both is expected

[westonruter]

@rafa8626 So in that case, it may be better to not use ME.js to play videos from Vimeo?

[rafa8626]

It's really up to you. But before the upgrade, I think Vimeo was doing the same. So nothing should change until a later release in my opinion

[westonruter]

worksforthem