Responsive Video

[harvikrishna]

HI,

I need a solution for responsive video in multiple mobile devices.
Requirement is video need to be exact fit (no scroll) to the screen or device. I have written this below code.

@media screen and (min-width:320px),(min-width:360px) and (max-width:480px) {
video { top:0px; position:relative; max-width: 100%; height: 230px !important; margin:0px auto; text-align:center; vertical-align:middle; clear:both;}
}

@media screen and (min-width:480px) and (max-width:640px), (max-width:800px), {
video { top:0px; position:relative; max-width: 100%; height: 375px !important; margin:0px auto; text-align:center; vertical-align:middle; clear:both;}
}

While checking in less resolution devices video is getting scroll in landscape mode.

And I need to write code for these devices

320 x 480 pixels
480 x 360 pixels
540 x 960 pixels
480 x 800 pixels
600 x 1024 pixels
640 x 480 pixels
640 x 960 pixels
640 x 1136 pixels
720 x 1280 pixels
720 x 720 pixels
768 x 1024 pixels
800 x 1280 pixels
1080 x 1920 pixels
1536 x 2048 pixels

Any one please give a solution. How to fit video in multiple devices

thanks,
Hari

[Paulie_D]

We’d need to see the HTML as not all browsers support the video tag yet AFAIK.

However, a quick browse through the CSS-Tricks archive might help.

https://css-tricks.com/search-results/?q=responsive+video

[michaellee]

Have you checked out Chris’ FitVid.js script? http://fitvidsjs.com/. We use it on a couple of blogs and it works beautifully. There’s also this article https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php I’ve used the videoWrapper CSS method and it works pretty well.

[Author]

Posts