Video Autoplay + Loop: mobile and desktop - DAWN theme

Store Design
, , , ,
1

Hi,

I am trying to make a video on my shopify website autoplay and loop for mobile and desktop.

On this page: https://obadiahcoffee.com/pages/seasonal-subscription

I also wanted to adjust how tall it was on desktop to make it a little smaller.

Thanks in advance for any help.

2

Hi @andrew72 ,

You can follow the below guide it will help you to add a section and everything will work fine.

3

Hello @andrew72 , Use this code to manage height of your video

.video-section__media video {
    max-height: 800px;
}

Additionally, I have noticed that a poster image is currently being displayed with the video. Please remove the poster image and retain only the video code, as autoplay and loop functionalities are already enabled.

4

Hello @EvinceDev

What section would I input that code on?

What do you mean by poster image? on the page linked I only have a video at the top of the page at the moment.

https://obadiahcoffee.com/pages/seasonal-subscription

5

Hi @namphan ,

I have already added the video section, I need help on something further,

Thanks.

6

Hi @andrew72 ,

With my tutorial it will help you to add video section with customizations for all.

And if you want to reduce the height for the current video section, please go to Actions > Edit code > Assets > base.css file and paste this at the bottom of the file:

@media screen and (min-width: 750px) {
#shopify-section-template--16080752017562__full_width_video_3jbzdp video {
min-height: 850px !important;
}
}