Why is my embedded video thumbnail not displaying correctly 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):

.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%; }

[GemPages]

Hello @yosef110

It’s GemPages support team and glad to support you today.

Can you share the video link? On safari some videos won’t show only downloadable.

[yosef110]

Hi @GemPages ,

The video actually does play on Safari (and Chrome). The only problem is that the video thumbnail on Safari is tiny, and the video only fills up the frame once we click on the tiny thumbnail.

Since the video is still in production, we unfortunately can’t publish the link to it here - but it is a 2 minute video at 1080p and is working perfectly fine on Chrome (just noting again that the video does actually play on Safari too - the thumbnail is the issue).

[yosef110]

Does anyone have a solution for this please?