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>