How to enable full screen on embedded Video

How to enable full screen on embedded Video

CreatorTim
Trailblazer
434 1 62

Hey, I added a Vimeo video to my store, but there's no full-screen button, so people can't expand it, and especially on mobile it's almost impossible to see it.

 

How can I add the full-screen option? 

I have fullscreen enabled on Vimeo, and it works there, but I don’t know why it’s not showing up on Shopify.

 

Here’s my store and the video: https://timcreator.myshopify.com/products/editing-masterclass

 

For comparison, here’s another store with a Vimeo video that does have the full-screen option: https://tomnoske.store/products/typewriter

 

Thanks for the help!
Tim

Replies 3 (3)

CafeDelMar
Shopify Partner
163 36 46

Hi @CreatorTim. May I ask how you are embedding the video?

Your iframe is missing the "allowfullscreen" property. Do you copy the iframe code from Vimeo? If so, are you sure the full-screen option is enabled for the video?

Here's the troubleshooting article: https://help.vimeo.com/hc/en-us/articles/12425790245777-Troubleshoot-Fullscreen-button-missing-from-...

I added the "allowfullscreen" parameter locally, and the full-screen button appeared. The only question is why it's missing.

➡➡   Easy Embed Code   ⬅⬅ add CSS/JS/Liquid codes to any page of your store



Speed Booster App - Improve your store speed in 3 clicks
- Was your question answered? Mark it as an Accepted Solution
CreatorTim
Trailblazer
434 1 62

I added it to the product description, but I also tried adding it through custom liquid in the store editor, and it still doesn’t show up.

 

This is the code I get from the video in vimeo:

<iframe src="https://player.vimeo.com/video/1070652200?title=0&amp;byline=0&amp;portrait=0&amp;badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479" width="1920" height="1080" frameborder="0" allow="autoplay; fullscreen; picture-in-picture; clipboard-write; encrypted-media" title="3minute grade using CinematiQ LUTs by Tim"></iframe>

 

Here’s the HTML of my product description:

CreatorTim_0-1743352052667.png

 

CreatorTim_1-1743352090698.png

 

CafeDelMar
Shopify Partner
163 36 46

@CreatorTim, let's try the following code instead:

<iframe mozallowfullscreen webkitallowfullscreen allowfullscreen title="CinematiQ LUT Collection by Tim" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" src="https://player.vimeo.com/video/1070652200?badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479"></iframe>

 

➡➡   Easy Embed Code   ⬅⬅ add CSS/JS/Liquid codes to any page of your store



Speed Booster App - Improve your store speed in 3 clicks
- Was your question answered? Mark it as an Accepted Solution