Homepage video size, autoplay, controls and text

[Melinda5]

Hey y'all! 

I have a video on my homepage and I am having problems with the following:

• The size on mobile is small and I would like to have it take up more space and appear more "full width" to give the similar view experience on desktop.
• the play button and controls/play bar are visible, I would like to remove those and have the video auto play without anything showing
• I would like to put a clickable text on top of the video (similar to a homepage image banner)

Hoping y'all could help me out as I have been searching everywhere for a solution!! My store launches soon and I really want to make my homepage really appealing. Here is my store link: https://www.suvoni.com/?_ab=0&_fd=0&_sc=1

Thanks in advance for everyones input!

[abap · Accepted solution]

First add your video in the "content" tab> archives.

Then you copy the link of the video.

After that you go to the Virtual store> Personalize theme> add section > add personalized liquid.

Then in the blank space (right side of the page) you will fill with your information. Shopify send e a reference link, you must substitute with your infos to play your video.

This is the Shopify reference:

<video poster="" loop="" muted="" playsinline="" nocontrols="" autoplay="" src="https://cdn.shopify.com/videos/c/o/v/d8373af2dd444ba091f7a2c514fd75f3.mp4" width="100%"></video> 

The highlighted phrase is where you must substitute with your video link (copied in the content page).

<video poster="" loop="" muted="" playsinline="" nocontrols="" autoplay="" src="https://cdn.shopify.com/videos/c/o/v/d8373af2dd444ba091f7a2c514fd75f3.mp4" width="100%"></video> 

it will be like: 

<video poster="" loop="" muted="" playsinline="" nocontrols="" autoplay="" src="https://melindavideo.mp4" width="100%"></video> 

Then, save and it should work 

[abap]

To remove the play button you go the personalized liquid and change the "control" for "nocontrol"

[Melinda5]

I will try this out! Which code folder would I look for this in? thanks

[abap · Accepted solution]

First add your video in the "content" tab> archives.

Then you copy the link of the video.

After that you go to the Virtual store> Personalize theme> add section > add personalized liquid.

Then in the blank space (right side of the page) you will fill with your information. Shopify send e a reference link, you must substitute with your infos to play your video.

This is the Shopify reference:

<video poster="" loop="" muted="" playsinline="" nocontrols="" autoplay="" src="https://cdn.shopify.com/videos/c/o/v/d8373af2dd444ba091f7a2c514fd75f3.mp4" width="100%"></video> 

The highlighted phrase is where you must substitute with your video link (copied in the content page).

<video poster="" loop="" muted="" playsinline="" nocontrols="" autoplay="" src="https://cdn.shopify.com/videos/c/o/v/d8373af2dd444ba091f7a2c514fd75f3.mp4" width="100%"></video> 

it will be like: 

<video poster="" loop="" muted="" playsinline="" nocontrols="" autoplay="" src="https://melindavideo.mp4" width="100%"></video> 

Then, save and it should work 

[Melinda5]

That worked!!!! However I noticed there’s a white gap at the bottom now, how do I get rid of that? Also do you know how to make the video big on mobile? This is how it’s appearing, need it to be full screen on mobile. 

[abap]

Awesome!

In the "personalized squid" you can adjust the gap. I don't know how it's called in English, so here's the photo. You can decrease that by putting on "0 px". The item is the "preenchimento inferior". 

 About making the video bigger on mobile I don't know sorry. 

[Melinda5]

Hi , thank you so much for your response! I've tried that already, but for some reason its still there

[Melinda5]

Hi @Moeed, I saw you comment on another thread. Wondering if you would be able to help me with this? 

store url: https://r29prw4gmzsv810m-26499285045.shopifypreview.com

Thanks

[Melinda5 · Accepted solution]

I've found the solution!! For those wondering how to make the mobile custom liquid video larger, I added this custom css in the customizer section:

@media screen and (max-width: 740px) {

video {
width: 100% !important;
height: 500px;
display: block;
margin: 0 auto;
object-fit: cover;
}

If you want to adjust the height to your liking, simply adjust the "height" value. Now the result looks like this:

[abap]

Awesome!!

[MRamzan]

You can try this solution: