How to make video responsive?

HTML & CSS
1

Hi - if I’m using my own video, and not embedding from youtube, how do I make it responsive for all screen sizes?

css (this @media works for #wrapper but not for .vid):

body{line-height:1;font-size:100%;margin:2% auto;background:#fff;}
#wrapper{width:97%;max-width:1200px;margin:0 auto;}
    @media screen and (max-width:330px){#wrapper{width:auto;}}
.vid{width:80%;margin:20px auto;text-align:center;}
    @media screen and (max-width:330px){.vid{width:auto;}}

html

<body>
<div id="wrapper">
<div class="vid">
<video controls="controls"><source src="RodSmith-McDonalds.mp4" type="video/mp4"></video>
</div></div></body>

thank you for your kind help - Val

2

Hi there valarcher,

try it like this…

[code]

untitled document body { margin:2%; line-height:1; font-size:100%; background:#fff; } #wrapper { width:97%; max-width:1200px; padding:20px 0; margin:auto; } #wrapper video { display:block; width:80%; margin:auto; } @media screen and (max-width:330px){ #wrapper { width:auto; } }
[/code]

coothead

3

Hi Val,

The trick is to create an element that creates the aspect ratio of the video (usually: 16:9) and then you absolutely place the video on this element so that it matches the height and width.

This article explains it but basically you add padding-top (or bottom) to a parent element using percentages (56.25%; usually but just change it to match the apsect ratio of your video) which creates a ratio between width and height as percentage padding is always based on the width of the element.

The parent has position:relative applied and then you simply place your video at top:0 left:0; and give it a width and height of 100% (or use bottom:0 and right:0 instead).

If the element is a fluid element or as in your case an 80% width element then the height will always maintain the apsect ratio as the page is resized and the video will get larger or smaller as required.

You can also add min and max-widths if you want things not to get too big or too small.

Here’s the bare bones example:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.video-wrapper {
	width:50%;
	margin:auto;
}
.video-inner {
	padding-top:56.25%;
	position:relative;
	height:0;
}
.vid {
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
}
</style>
</head>

<body>
<div class="video-wrapper">
		<div class="video-inner"><img class="vid" src="http://placehold.it/350x150"></div>
</div>
</body>
</html>

The image in the example above would be your video.

4

Thanks coothead - works beautifully!

oh dear Paul, I know your heart is sincere trying to get me to understand the logic, but when you morph into wizard incantation mode, I can’t understand a word you’re saying and the article is even more complex!

I’ve taken coothead’s simple way this time 'cause it works!

Thanks million for your quick replies :slight_smile:

5

Golly gosh,

someone actually likes one of coothead’s little efforts. :smiley:

I am now more than happy to shuffle off this mortal coil. :innocent:

coothead

3 Likes
6

http://webdesignerwall.com/tutorials/css-elastic-videos - works for videos, embedded maps and so on.

7

That’s the same method I used above and is taken from the article by Thierry that I linked to :smile:

8

I like a lot of your posts :smile:

9

I would hazard a guess though, that it would be more for their
mildly humorous content than any displayed coding skill. :mask:

coothead

10

ha-ha lol coothead is funny… thanks for reminding me to add the viewport!

Lovely link bluedreamer - thank you! I understand that page.

It just struck me, since it’s only a video on my page and nothing else, and I have media="screen, projection", then maybe I should delete max-width:1200px; in #wrapper because this would limit it on a TV screen? It doesn’t need a max-width does it when there’s no text on the page?

I need the video to be viewed easily from tv to cellphone.

Thank you!

11

You made my day more than the once that you know of.

12

I think 1200px is probably big enough for any video :smile:

Viedos aren’t my area but I believe you can allow users to have them go full-screen now.

13

thank you! I’ll just stick to 1200px then because that link is all in Swedish :slight_smile:

14

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.