How do i make a video fit the entire phone screen?

Store Design
, ,

Topic summary

A user needed help making a video fill the entire mobile screen on their Shopify store. The video displayed correctly on desktop but appeared very small on phones.

Initial Solution:

  • Another participant provided updated CSS code to make the video responsive and full-width on mobile devices
  • The original poster confirmed this solution worked

Additional Features Added:

  • The user then requested a “Shop Now” button overlay on the video that links to a product page
  • Code was provided to add a clickable button overlay with styling

Current Issue:

  • A third user (Michael) tried implementing similar code but encountered a publishing error: “Online store editor session can’t be published”
  • This issue remains unresolved with no response yet

The discussion demonstrates a common responsive design challenge with embedded videos in Shopify stores, where CSS adjustments (using object-fit: cover, 100vw width, and 100vh height) are needed for proper mobile display.

Summarized with AI on November 1. AI used: claude-sonnet-4-5-20250929.
1

Hi, i need some help with my website currently i have a video, but the video looks good on dekstop but on the phone it is just a very tiny video i want it to use the entire screen anyone who can help with that?

Custom Liquid Code:

video { width: 100%; height: 200%; display: block; margin: auto; }

HOW IT LOOKS RIGHT NOW

![Screenshot 2024-01-04 at 09.48.30.png|1359x670](upload://cPt8hYdQQo7zNxQtil3gNA2pY2q.png)
2

Hi @KeremYildiz

You can try to update your code to this and check again
3

Thank you so much!

1 Like
4

Happy I could help!

5

Actually i had one more question i want to make a shop now button on the video like this

and also so the video when you click on it it tranfers you to the product page

6

Update your code and please repalce “your-product-url” in code with your product URL


Buy Now
7

Dear Dan,

I’m experiencing the same issue, but in my case, the code doesn’t seem to work. I received the following error message:
“Online store editor session can’t be published.”

Do you have any ideas on how to resolve this?

Thank you in advance for your help.

Best regards

Michaël

Scherm­afbeelding 2025-02-06 om 18.24.32.png
Scherm­afbeelding 2025-02-06 om 18.24.32.png2838×1784 502 KB