Make WordPress Core

Opened 21 months ago

Last modified 5 weeks ago

#40522 new defect (bug)

Twenty Seventeen: Youtube videos are left aligned in Safari

Reported by: shireling Owned by:
Milestone: 5.1 Priority: normal
Severity: normal Version:
Component: Bundled Theme Keywords: has-patch needs-testing
Focuses: Cc:


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)



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.

Attachments (1)

40522.patch (579 bytes) - added by laurelfulford 19 months ago.

Download all attachments as: .zip

Change History (12)

#1 @laurelfulford
21 months ago

#40625 was marked as a duplicate.

#2 @laurelfulford
21 months ago

  • Keywords needs-patch added

I can also see this issue, in Safari 10.1.

#3 @ocean90
20 months ago

#40625 was marked as a duplicate.

#4 @laurelfulford
19 months ago

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:

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.

#5 @noisysocks
15 months ago

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

This ticket was mentioned in Slack in #forums by zoonini. View the logs.

12 months ago

#7 @laurelfulford
6 months ago

  • Keywords has-patch added; needs-patch removed

#8 @laurelfulford
6 months ago

  • Keywords needs-testing added

#9 @laurelfulford
6 weeks ago

#45509 was marked as a duplicate.

#10 @laurelfulford
6 weeks ago

  • Milestone changed from Awaiting Review to 5.0.2

#11 @laurelfulford
5 weeks ago

  • Milestone changed from 5.0.2 to 5.1
Note: See TracTickets for help on using tickets.