[wp-trac] [WordPress Trac] #40522: Twenty Seventeen: Youtube videos are left aligned in Safari

[WordPress Trac]

#40522: Twenty Seventeen: Youtube videos are left aligned in Safari
---------------------------+------------------------------
 Reporter:  shireling      |       Owner:
     Type:  defect (bug)   |      Status:  new
 Priority:  normal         |   Milestone:  Awaiting Review
Component:  Bundled Theme  |     Version:
 Severity:  normal         |  Resolution:
 Keywords:  needs-patch    |     Focuses:
---------------------------+------------------------------

Comment (by 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.

 [[Image(https://cldup.com/PF2wkOii9U-3000x3000.png)]]

 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.

--
Ticket URL: <https://core.trac.wordpress.org/ticket/40522#comment:4>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform