Twenty Seventeen: Youtube videos are left aligned in Safari

[shireling]

This is likely related to #39893 and #39616. Youtube video headers are left aligned when viewed in Safari.

I've reproduced the issue on Safari version 10.0.3 (12602.4.8)

Screenshot:

The black bars are a separate issue being discussed in the two threads linked above, but the video is also not displaying full width in this browser.

[laurelfulford]

#40625 was marked as a duplicate.

[laurelfulford]

I can also see this issue, in Safari 10.1.

[ocean90]

#40625 was marked as a duplicate.

[laurelfulford]

I assumed that this was a simple issue of Safari positioning the iframe too far left, but that doesn’t seem to be the case. It’s positioning the iframe just fine, but when the video starts inside of the iframe, the video itself is somehow too far left.

I was able to recreate the same issue with some barebones styles from the theme using Codepen - one example has the video set to autoplay, and the other doesn’t. In the one that isn’t set to autoplay, the still image at the beginning is in the right spot, but the video jumps left once you start playing it:

• With autoplay: ​https://codepen.io/laurelfulford/pen/GENvog
• Without autoplay: ​https://codepen.io/laurelfulford/pen/EXNvmd

Removing the object-fit: cover style seems to fix.

I’m not exactly sure why this is an issue with iframes in Safari, but the good bit is, it doesn’t look like the style does anything for that element. The iframe doesn’t scale the same as images and videos (which causes #39616 and #39893); simply setting the iframe to 100% height and 100% width seems to have the same effect.

Attached a patch that removes the iframe from the styles associated with object-fit: cover. Let me know if there’s a reason to keep it - if so, there might be another way around this issue, since it’s only happening in the one browser.

[noisysocks]

Was working with a WordPress.com user that ran into this bug and can confirm that @laurelfulford's patch fixes the issue.

[laurelfulford]

#45509 was marked as a duplicate.

[desrosj]

Added customizer.png​ to show that the issue was worse in the customizer for me.

I gave 40522.patch​ some testing (Safari, Firefox, Chrome on MacOS) and that does fix the issue for me. I also could not find a reason to keep this.

[laurelfulford]

In 44669:

Twenty Seventeen: Prevent YouTube videos from being cut off in Safari.

The theme's object-fit: cover styles for the header caused YouTube videos to be positioned too far left in Safari.

Fixes #40522.

[laurelfulford]

Thanks for the testing, @desrosj!