Why is my embedded video thumbnail small on Safari?

[yosef110]

Hi,

I'm embedding a video which I have saved on Shopify as a file onto my homepage.

The video thumbnail works absolutely fine on Chrome, and covers the entire frame.

However, on Safari, the video thumbnail is tiny, and only upon clicking on the tiny thumbnail, does the video fill in the entire frame.

Does anyone know what I can change in the code to make this work on Safari as well? I got the code from this YouTube video: https://youtu.be/671Gins9lb8

My code is below (please note I can't share the link to the actual file or the website):

<style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; autoplay loop muted} .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class="embed-container"><iframe src="https://cdn.shopify.com/videos/[FILE PATH].mp4" frameborder="0" allowfullscreen=""></iframe></div>

[INA_MSWEB]

Hi!

I hope you are doing good and welcome to the Shopify Community!

This is MS Web Designer (Top Rated Shopify Certified Experts and eCommerce Consultant from India & Singapore).

Can you please share your website URL?

Thanks