Simple Responsive Video CSS Method

Posted on Posted in Design & Development Tips

If you are serving video headers or heros or any large videos, you can use this or a version of this to serve Desktop, Tablet and Mobile versions. Tweek per your needs. iPhone X in landscape gets tablet video. Other phones get the mobi vid.

Make three copies of your video. I made 1080p (desktop), 720p (tablet), and 480p (mobi). Serve based upon media queries below. Download this code.

<!–drone shot –>
<div class="my-vid-holder">
<video id="vid-dt" preload="auto" playsinline autoplay muted loop>
<source src="https://bowlusroadchief.com/wp-content/uploads/vids/home-dt.mp4" type="video/mp4">
</video>
<video id="vid-tab" preload="auto" playsinline autoplay muted loop>
<source src="https://bowlusroadchief.com/wp-content/uploads/vids/home-tab.mp4" type="video/mp4">
</video>
<video id="vid-mobi" preload="auto" playsinline autoplay muted loop>
<source src="https://bowlusroadchief.com/wp-content/uploads/vids/home-mobi.mp4" type="video/mp4">
</video>
</div>

<style>e
#vid-dt, #vid-tab, #vid-mobi{
display:none;
}
/* Desktop and laptop of large tablet serves larger file */
@media (orientation: landscape) and (min-width:1025px){
#vid-dt{
display:block;
}
}
/* Tablets and iPhone X in landscape serves medium file */
@media (min-width:800px) and (max-width:1024px){
#vid-tab{
display:block;
}
}
/* ipad tablets in portrait and phones serves smaller file */
@media (max-width:799px){
#vid-mobi{
display:block;
}
}
</style>