Behind Website Codes

For videos on product page and video page

<video controls="controls" style="max-width: 100%; height: auto;"> <source src="place video link here" type="video/mp4" /> Your browser does not support our video. </video>

 

 

 

For videos motion autoplay on homepage

<video controls autoplay loop playsinline muted><source src="place video link here" />
</video>

 

 For the video to be not so big, add:

 

<style>
video {
display: block;
margin: 0 auto;  - this 0 means, make it center
width:50%;        - this makes width of video 50%
}

 

Now you will have this:

 

<style>
video {
display: block;
margin: 0 auto;
width:50%;
}
</style>

<video controls autoplay loop playsinline muted><source src="https://cdn.shopify.com/videos/c/o/v/cf7be3bc34ba4fd785a162d2da9523c1.mp4" />
</video>

 

For mobile responsive and size, add media query:

 

@media screen and (max-width: 800px) {
video {
width: 90%; 
}                      - this means for mobile, the video will be larger at 90% or however size you want

 

 

 

Final code will be for desktop and mobile:

<style>
video {
display: block;
margin: 0 auto;
width:50%;
}

@media screen and (max-width: 800px) {
video {
width: 90%;
}
}
</style>

<video controls autoplay loop playsinline muted><source src="place video link here" />
</video>