Lodestar: Safari 10.1.1 - Gap appears beneath embedded videos on the front page

[laurelfulford]

This issue was originally reported by @dcoleonline in 4698-wpcom-themes:

Steps to replicate

1. Set up a front page panel that uses two columns. Add this text to the editor of the panel page:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a interdum nisl, non hendrerit elit. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec vestibulum, lacus et cursus vestibulum, neque nisl fermentum purus, ut interdum ligula felis blandit dui. Duis placerat fermentum tristique. Nullam rhoncus libero id sollicitudin sollicitudin. In congue placerat auctor. Etiam porttitor justo libero, in porta turpis porta eu. Duis mattis ullamcorper tellus ullamcorper vulputate. Vivamus eget velit pretium, ultricies mi a, efficitur ex. Maecenas id viverra neque. Ut ut auctor urna. Cras aliquam commodo quam. Sed sollicitudin tempor semper. Aliquam faucibus malesuada mi vel varius.

Vestibulum a nulla sed ante vestibulum tincidunt in a turpis. Praesent pulvinar elit justo, ut dignissim nulla tincidunt sit amet. Quisque ac volutpat dolor. Sed a massa purus. Ut at massa felis. Nulla dapibus fringilla lorem eget rutrum. Nullam at ligula pretium, blandit velit a, euismod metus. Nunc imperdiet nibh risus, viverra malesuada quam ultricies sit amet. Duis dictum elit sit amet sodales porttitor.

https://www.youtube.com/watch?v=oFgIBZO_T9k

2. Notice that there is a gap beneath the content that should not appear. I tested this with a Vimeo embed as well, and it looks like the div.jetpack-video-wrapper element is being positioned somewhere other than where the video is displayed. Here is a screenshot to illustrate this:

This is only happening in Safari and can't be reproduced in Chrome or Firefox. It still happens in v11.0.2, and "fixes" itself when you resize the browser window. It doesn't happen on every page load.

• User report: https://en.forums.wordpress.com/topic/lodestar-display-on-home-page-with-safari

[sixhours]

Still reproducing this in 11.0.3. My hunch is it has to do with Jetpack Responsive Videos.

[sixhours]

@thomasguillot Would you have time to investigate this as part of your work on Responsive Videos this week? Automattic/jetpack#3107