While I was coding the Elemin Theme (a responsive WordPress theme that I recently designed), one of the challenges that I faced was to make the embedded videos elastic. Using the max-width:100% and height:auto trick works with native HTML5 video tag, but it doesn’t work with embed code using iframe or object tag. After hours of experimenting and Googling, I finally found a trick on how to achieve this. If you are creating a responsive design, this simple CSS trick will come in handy. View the final demo and resize your browser window to see it in action.

View Demo Elastic Videos

Elastic HTML5 Videos (demo)

With HTML5 video element, you can easily make it elastic by using the max-width:100% trick (see elastic HTML5 video demo). As mentioned in the introduction, this trick doesn’t work if the embed code uses iframe or object tag which is commonly used by most video sharing sites such as YouTube and Vimeo.


video {
	max-width: 100%;
	height: auto;
}

Elastic Object & Iframe Embedded Videos (demo)

The trick is very simple. You need to wrap the embed code with a <div> container and specify 50% to 60% padding bottom. Then specify the child elements (iframe, object embed) 100% width, 100% height, with absolute position. This will force the embed elements to expand fullwidth automatically.

CSS


.video-container {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
}

.video-container iframe,  
.video-container object,  
.video-container embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

HTML


<div class="video-container">
	<iframe src="http://player.vimeo.com/video/6284199?title=0&byline=0&portrait=0" width="800" height="450" frameborder="0"></iframe>
</div>

How to Create Fixed Width & Elastic

To restrict the width of the video, an additional <div> wrapper is required. Wrap the video with another <div> tag and specify a fixed width value with max-width:100%.

CSS


.video-wrapper {
	width: 600px;
	max-width: 100%;
}

HTML


<div class="video-wrapper">
	<div class="video-container">
		<iframe src="http://player.vimeo.com/video/6284199?title=0&byline=0&portrait=0" width="800" height="450" frameborder="0"></iframe>
	</div>
	<!-- /video -->
</div>
<!-- /video-wrapper -->	

Compatibility

This trick works on all browsers (tested on Chrome, Safari, Firefox, Internet Explorer, Opera, iPhone and iPad).

Credits

This trick was found on tjkdesign.com.

141 Comments

Louis Gubitosi
May 31, 2011 at 9:36 am

Great tip, thanks Nick!

Catalin
May 31, 2011 at 9:44 am

Very useful trick and thanks for sharing!

Martin
May 31, 2011 at 9:45 am

Wow. I changed our layout mainly because of this problem and use scale now for the responsiveness. But this solution is awesome! Thanks for sharing.

daniel
May 31, 2011 at 10:41 am

Very cool. Thanks for the tip.

Tommaso
May 31, 2011 at 10:41 am

That’s what i was looking for from long time!!

Thanks

Flowermountain
May 31, 2011 at 11:19 am

Excellent, I was just about to look for this when I came across your article.

Thanks a lot!

Peppe
May 31, 2011 at 11:38 am

Finally a solution for this. Thanks :)

Vladimir Krasko
May 31, 2011 at 1:56 pm

High five for epic find!

shawn
May 31, 2011 at 3:20 pm

Thanks for the tip. Been using this technique all week and absolutely love the results. Proof positive that u r da man :)

Doug
May 31, 2011 at 3:23 pm

Great! Thanks!

joost
Jun 1, 2011 at 12:12 am

Hi,

tnx for the post. I was wondering how you could test all these devices fast. Do you have any tooling for this perhaps?

Hollywood Cat
Jun 19, 2012 at 10:37 am

You can test across several device widths on:
http://www.studiopress.com/responsive/

Robert
Jun 1, 2011 at 8:26 am

Great Solution, thanks!

Paolo
Jun 1, 2011 at 8:39 am

Very good solution! Compliments and thanks!

Manuel
Jun 1, 2011 at 6:13 pm

Cool trick for 100% width videos, thanks for sharing! :)

evermeg
Jun 1, 2011 at 6:24 pm

A very awesome simple theme! and appreciate the workup of how to do this. great!

Alex
Jun 2, 2011 at 3:31 am

Amazing! Great simple solution to a problem I’m sure loads of people have. Can’t count the number of times I’ve seen Youtube videos escape their enclosing boundaries. Props.

Tom Hermans
Jun 2, 2011 at 3:46 am

Thanks, good idea. And certainly something I’ll built in my own base theme.

ToM Hermans.

John C. Olsen
Jun 2, 2011 at 7:24 am

This is just what I’ve been looking for. It works almost perfect too. I noticed something I wonder if is possible to fix though. With your code here, YouTube videos embed perfectly edge to edge while Vimeo videos get’s a back bar added to the top and bottom. Likewise, if I set the padding to .video-container { padding-top: 0; } Vimeo videos embed perfectly edge to edge while YouTube videos gets a black bar added to the left and right.

Is it possible to make both Vimeo and YouTube videos have a perfect edge?

paul mason
Nov 15, 2012 at 9:41 am

Hi, Did you find the solution for this? i’m having the exact same issue, would be good to know if there is a work around

Marybeth
Jun 2, 2011 at 10:06 am

This is phenomenal and precisely what I was looking for. Thank you so much for sharing! I’ve been looking for a way to keep YouTube videos under control ;)

Aquecedor Solar Campinas
Jun 2, 2011 at 10:51 am

Awesome. It saves a lot of trouble!

Attractivo
Jun 2, 2011 at 10:11 pm

Problem solved. Great advise – thank you!

Manifo
Jun 3, 2011 at 5:05 am

Thanks for sharing. U saved much time to many people :)

HMS Home Warranty
Jun 3, 2011 at 7:31 am

Hey great post..
This should make all user’s life a lot easier from now on. Thanks a lot for posting the project files
Its now easier to understand Elastic CSS better…Thank You

alex
Jun 3, 2011 at 11:23 am

Interesting article! Very useful! I will use this in my future projects!

Peter Schreiner
Jun 3, 2011 at 9:44 pm

Again. Thanks for the great tip!

Claudio
Jun 4, 2011 at 3:01 pm

The trick works very well, thank you!

Web Designing
Jun 6, 2011 at 12:14 am

Excellent Info. Will be a great help. Thanks for sharing it.

logo ontwerp
Jun 6, 2011 at 8:20 am

?

dave
Jun 6, 2011 at 9:04 am

well done!

danny
Jun 6, 2011 at 1:17 pm

awesome! thanks, i’ve been wondering about this for a while.

Crowdfinch
Jun 7, 2011 at 7:10 am

It is a very awesome information.

bob
Jun 7, 2011 at 9:18 am

So max-width:100% is the big deal?

Atif Iqbal
Jun 8, 2011 at 8:28 am

Its work nice for me, thank you.

amplifyme
Jun 8, 2011 at 2:09 pm

[code]
img,
iframe,
object,
embed {
max-width: 100%;
}
[/code]

Edson
Jun 8, 2011 at 6:43 pm

Awesome technic! But I didn’t understand the meaning of that value for padding-bottom (56.25%?). Could you better explain that please?

iPog
Jun 9, 2011 at 4:37 pm

it’s the 16:9 aspect-ratio in percentage (9/16*100).
you might want to define classes for this and for other ratios, e.g.:
figure.ar169 { padding-bottom: 56.25%; }
figure.ar43 { padding-bottom: 75%; }
figure.ar11 { padding-bottom: 100%; }
then you can allow the user to change the class value by a js button or whatever…
(anyway, i use the html5 figure element as the container.)

John Smith
Jun 8, 2011 at 10:25 pm

Awesome!

Pavel
Jun 9, 2011 at 1:08 am

Hello!!
Very Nice Template!!
Thank you!!

El garch
Jun 9, 2011 at 9:54 am

thx for the tuto ;)

iPog
Jun 9, 2011 at 4:47 pm

you can remove the “padding-top: 30px;” part from the css if you don’t want fixed control bar for youtube videos. just add the parameter after the video url: ?autohide=1 :) (and there’s really no need to add extra 30 pixels in case of the vimeo player.)

Pozycjonowanie
Jun 10, 2011 at 12:43 pm

Its work nice for me! Thank you.

welington
Jun 10, 2011 at 1:10 pm

Nice blog! Great work!
web design Curitiba

Thierry Koblentz
Jun 12, 2011 at 12:28 pm

@Nick La

You should follow the Creative Commons (CC) “guidelines” when using someone else work: http://creativecommons.org/licenses/by-nc-sa/2.0/

Please let me know if tweeting the above can help…

Edmonton
Jun 12, 2011 at 11:42 pm

Excellent. I was looking for a solution for a website based on the 1080p (1920×1080) resolution. The videos work awesome! Thank you for sharing.

bebek odasi
Jun 14, 2011 at 2:23 am

perfect tips. i tried and its work. thank you very much.

Edmonton Web Design
Jun 14, 2011 at 1:07 pm

Ahhhh, I didn’t see what was special about this until I read what you mentioned about the padding. Very creative.

Saeed Neamati
Jun 15, 2011 at 6:06 am

Yes, max-width trick is really helpful. I want to create a page at Web tips and tricks to centralize these techniques.
Thank you.

jon bece
Jun 16, 2011 at 5:32 am

very nice template Design

Browse Design
Jun 18, 2011 at 5:35 am

it looks great. i may use it in my site. thanks very much.

Vernon Website Design
Jun 18, 2011 at 10:16 pm

Brillant… your a life saver!

bbbb
Jun 20, 2011 at 12:57 am

50 Comments

Ian Day
Jul 23, 2011 at 7:04 pm

Thanks for this information. I had the same issue with a site that had a lot ofvideo content. My problem is now solved.
Thanks
Ian

Travis Anderson
Jun 20, 2011 at 5:17 pm

This was exactly what I was looking for. Thanks for taking the time to post!

London Car Rental
Jun 22, 2011 at 4:51 am

These are great! Thanks for sharing…love the Elastic HTML5 Videos.

tunisie
Jun 28, 2011 at 4:07 pm

thanks very good idea for my website thanks a lot

Ronny
Jun 29, 2011 at 10:25 am

Say, did you manage to teach WordPress to wrap oembeds into a div automatically? If so – how the heck? :)

billybob
Jun 30, 2011 at 5:51 pm

Can this be used with the jwplayer?

Don
Feb 29, 2012 at 11:51 am

Did you find a good solution for JWPlayer? I’m having issues with Youtube through JW on an adaptive site.

shiva
Jul 5, 2011 at 12:38 am

WOW!!! Nice Tip

Chris Bracco
Jul 5, 2011 at 1:53 pm

This. is. amazing. Thank you so much for the link!!

Mike Badgley
Jul 15, 2011 at 9:31 am

One thing I’d recommend doing is ensuring that your videos are being set to the proper aspect ratio. There is no guarantee that they will be in 16:9.

height / width * 100 = padding-bottom

crowd SPRING
Jul 18, 2011 at 3:22 am

I just stumbled upon your blog and wanted to say that I have really enjoyed reading your blog posts.

SEO from Creare
Jul 19, 2011 at 2:53 am

I have had an issue with this for ages, especially now as I have just created a site purely built on video content. The ideas in this will come in handy big time, thanks! I may even share my site with you to see how your fix may have worked.

Sven
Jul 19, 2011 at 6:40 am

Thanks a lot for this awesome trick.

alovilla
Jul 20, 2011 at 8:53 am

I like it. Thank you

silvi anggraini
Jul 23, 2011 at 1:05 pm

simple and very useful

Abhishek Singh
Jul 24, 2011 at 12:53 pm

Hi,

i tried ths trick on my site, but it did not worked.

Please refer this link and let me know the cause of it, and how to fix it : http://www.watchurshow.com/2011/07/iifa-2011-canadas-toronto-2011-24-july_92.html

iamkeir
Jul 26, 2011 at 1:23 pm

Neat trick… :) Could you explain the reason behind 50%/60% padding (as opposed to any other padding value)?

Abhishek Singh
Jul 27, 2011 at 12:08 pm

Hi,

Thanks.

Are your talking about 56.25% padding value for padding-bottom.

This is just i copied the code from your example. No Brainer… :D

.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}

complex41
Aug 23, 2011 at 11:16 am

And then he handed you the thirty-five 45

Abhishek Singh
Jul 27, 2011 at 12:08 pm

Hi,

Thanks.

Are your talking about 56.25% padding value for padding-bottom.

This is just i copied the code from your example. No Brainer… :D

.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}

Ask A Geek
Aug 5, 2011 at 1:32 pm

I’ve been designing web sites for over 15 years but I haven’t really done much HTML work as of late. More importantly I haven’t done anything in HTML 5 since most everything I do now is databases and scripting. I’m going to have to look more into HTML5 as it looks like it has a lot more oompf than HTML4 had. The video trick is pretty neat.

discount mbt
Sep 15, 2011 at 11:42 am

There’s no doubt that this is certainly essentially the most vital information personally. And i am glad reading your article. But should remark on few general things, Your website style is perfect, the articles is very excellent : D. Good job, cheers

mybookmart
Oct 3, 2011 at 2:46 am

perfect site for my website

Johnny 6
Oct 9, 2011 at 6:12 am

I’ve been building sites for about 2 1/2 years now. This site is on a short list of web design blogs I reference continually. Embedding YouTube videos into a responsive design was something I had to deal with recently on my hobby site, yesterday actually. I plan on going home and implementing this solution immediately. Thanks!

Jay
Oct 11, 2011 at 12:40 pm

Thank you so much, was looking exactly for this! Worked perfectly

Le
Nov 8, 2011 at 11:08 am

Thank you for this and all the other work you share.

Keith
Nov 18, 2011 at 5:00 pm

I am working on a new responsive design and found this very helpful. In my situation I am using BuddyPress and a plugin called BuddyPress Activity Plus. I am relatively new to web design so I am not technical enough to edit the plugin.

After playing with it for a little while I found that just using the a max-height and max-width it seemed to do the job. All I added to my css was:

.activity-inner iframe,
.activity-inner object,
.activity-inner embed {
max-height: 100%;
max-width: 98%;
}

Like I said, I am pretty new to this, so I am not sure how cross browser compatible it is but I think it will serve my purposes.

Any thoughts on if this will work across the board?

Kripaluji Maharaj
Nov 21, 2011 at 6:14 am

The CSS design always has helped millions of people on the earth and i am also one of them, Thanks for the great design and great comments to it.

Alex
Nov 28, 2011 at 4:06 pm

THANKS FOR THIS AWESOME TRICK!

Kripalu ji Maharaj
Nov 30, 2011 at 8:35 am

This is really a very vital information about HTML coding which helped me a lot in completing my project based on this codes!

Jose
Dec 8, 2011 at 1:43 pm

Brilliant trick. Thanks a lot for sharing…

Chris LaChance
Jan 4, 2012 at 3:10 pm

This trick works great. Thanks so much!

Tucker Joenz
Feb 7, 2012 at 10:30 pm

This worked great, had a few work arounds to make it work in my situation, but thanks for this share!!

Lloyd
Feb 10, 2012 at 9:23 pm

This will likely be the most important piece of info I pick up in 2012. Thank you so much for posting this.

HIelscher Ultrasonics
Feb 20, 2012 at 5:24 am

Great work! Like it!

James
Feb 23, 2012 at 9:04 am

Perfect, elegant and no JS!

someonetech
Feb 24, 2012 at 10:42 pm

Excellent!

Jeff Golenski
Mar 12, 2012 at 11:52 am

Thanks for this solution, really appreciate it!

Tom Mepham
Mar 26, 2012 at 10:07 pm

Great! Thank you very much :)

Michael DuBois
Apr 1, 2012 at 10:13 pm

Thanks so much! Worked perfectly.

Jess
Apr 2, 2012 at 6:41 pm

Thanks a lot
Amazing and simple ;)

James
Apr 9, 2012 at 6:38 am

Cool, thanks very much for the fix. Seems silly that YouTube doesn’t have an option for filling in the auto height (if height is not supplied). It’s already a bit complicated for general users so this cuts down on problems with the automation/integration process.

Dave
Apr 10, 2012 at 2:15 pm

It works great for IE and Chrome but it doesn’t work for FF 11. Do you have an idea how to get this in FF done?

Brian
Apr 15, 2012 at 2:31 am

You may have found this tip at tjkdesign.com, but you rock for bringing it to the rest of the world! Your site came up first in Google (and a very nice site btw).

Yorik Wnent
Apr 24, 2012 at 7:18 am

Passing a small # shortcode [video] to # wordpress for all his videos responsive with the # css link above.
In the functions.php file add:

caption_shortcode function ($ atts, $ content = null) {
return ”. $ content. ”;
}
add_shortcode (‘video’, ‘caption_shortcode’);

And after in the articles or posts surrounded the code from youtube without width = “#” height = “#”.

example

[video] [/ video]

Yorik Wnent
Apr 24, 2012 at 7:25 am

Can’t put any div
http://pastebin.com/UVcAbuUM

Richard
Apr 27, 2012 at 5:29 am

I was trying using the method but when I put float left, it failed miserably.

Richard
Apr 27, 2012 at 5:43 am

Sorry but never mind, fixed the issue by making another wrapper on it. You can’t float the video container directly.

Aygon
Jun 10, 2012 at 3:24 am

Thanks for the awesome tip!!!
Extra video-container made it work like crazy!!! :D

SuperPhil
May 17, 2012 at 4:21 pm

Awesome Tip!! This will really help with a responsive theme I am working on.

Tommy
May 23, 2012 at 1:34 pm

If you could help with this problem, that would be great! I’m trying to set a div with a border background that will auto height itself with added content. Trouble is, the content has absolute divs in there, which just don’t obey auto height – they are a rule unto themselves. How would I code a div that will auto adjust? Any help appreciated.

juan
Sep 25, 2012 at 10:45 am

Million thanks!!

Web designing company Mississauga
May 24, 2012 at 6:33 am

Videos are good ways for connecting with your audiences and readers of your website are getting chance to see you in action.So videos must be used in website

Gabrielle
May 31, 2012 at 3:59 pm

Excellent post. I’ve been working with responsive design for the past couple of months and stretching my wings a bit. I appreciate how concisely you spelled all this out. Wonder if you know of a responsive audio player that can be duplicated on same page (I’ve only found one using jS that allows just one music clip per page)?

Tim
Jun 8, 2012 at 4:30 am

Thank you for this solution!

Uxepi
Jun 15, 2012 at 11:47 am

Amazing!!! streamlined and beautiful!. …worked seamlessly.
Thank you so much for your efforts.

-uxepi

kolpi
Jun 18, 2012 at 11:55 am

Hi,

I’m currently viewing the demo page with Firefox 13 and I cannot resize the width of the Firefox window.

Seems like a Firefox issue to me as it works everywhere else (Chrome, Safari, Opera, IE), and there is also a bug report about it: https://bugzilla.mozilla.org/show_bug.cgi?id=765788

Just wanted to let you know ;)
Thanks for your work

Hollywood Cat
Jun 19, 2012 at 10:35 am

This is great. Has saved me so much work as I am new to responsive design but the more I do, the more I like it!

bilgin
Jun 21, 2012 at 12:52 pm

thank you for this clean solution. like it (Y)

A Alyan
Jun 26, 2012 at 11:15 am

Thank you!

Doxotron
Jun 27, 2012 at 5:22 am

Thanks. ^_^

Kirstan
Jun 27, 2012 at 6:56 am

This is great, thanks!

CDubbya
Jul 2, 2012 at 4:33 pm

Thanks! My client keeps mentioning a .css movie that can be used in ipad and other mobile devices and they really had me confused.

yves
Jul 3, 2012 at 6:49 am

great post, thanks. nevertheless, there seems to be a problem with Firefox 13. i cannot resize the window’s width, it “jumps” automatically to the previous size. i think this issue has been introduced with FF13… anyone found a solution for that?

Craig Smith
Jul 12, 2012 at 7:38 pm

I always wrap my iframe or embedded code in a div that I stylize/size separately, I will have to try out this trick. I don’t use much video, but I am sure it will come in handy for other things as well. Thanks.

Prasad Sambari
Jul 25, 2012 at 3:16 am

That is a great post. Thanks a lot!!

Ibiza yates
Jul 29, 2012 at 1:23 pm

evertheless, there seems to be a problem with Firefox 13. i cannot resize the window’s width, it “jumps” automatically to the previous size. i think this issue has been introduced with FF13… anyone found a solution for that?

mahesh
Aug 20, 2012 at 9:57 am

nice it’s help me

Francis Roy
Aug 24, 2012 at 9:47 am

Nice! I would like to use that trick to embed a Vimeo video on Google Sites. Any chance to get this work?

Ibiza
Aug 24, 2012 at 4:10 pm

thanks. nevertheless, there seems to be a problem with Firefox 13. i cannot resize the window’s width, it “jumps” automatically to the previous size. i think this issue has been introduced with

Szczepan
Aug 30, 2012 at 4:05 am

Thank you!!!

Xianstudio
Sep 11, 2012 at 2:36 pm

Thank you!!!!!!!
Solved my problem.

Raymond
Sep 19, 2012 at 6:46 am

This is a nice article. I found a problem when a mobile device is rotated from portrait to landscape.

The youtube video restarts because of the resized elements. It’s quite annoying and I’m not sure how to stop the video from restarting.

Any hints would be appreciated.

Jeff Wiencken with Rex Post
Sep 19, 2012 at 1:59 pm

I have a shape 5 template up, installed fitvids, can’t make it work could you would you share HTML code to insert into module, I would prefer embedding video if that is possible.

The site is not live so I can’t share without providing log in HELP!!!!!!!!!!!!!!

cpaul
Oct 10, 2012 at 2:54 pm

Thank you so much for this code! Works perfectly!

Marty John
Oct 12, 2012 at 12:05 am

Thank you for this great tutorial. I am gonna use this also for my website too.

snaphuman
Nov 12, 2012 at 7:08 pm

Thank you man. It works great!

Vasilis
Nov 18, 2012 at 7:54 am

Thanks its what i was looking for!

Tom Toner
Nov 26, 2012 at 5:49 pm

Thank, exactly what i was after and works great!

Lucas
Dec 3, 2012 at 12:54 pm

Thanks! :D Very nice job!

Paul
Dec 4, 2012 at 5:04 am

Since upgrading my iPad to iOS 6 this fix doesn’t seem to work any more, I think it’s height: auto causing the issue. Anyone experienced similar and have a fix?

sepelus
Jan 25, 2013 at 12:23 am

Great stuff!!, I also found great ideas in this site: http://www.freakzion.com/index.php/The-Blog-December-2012/resize-your-videos-in-responsive-design.html

Hope it helps you as well

Opiek Pulau Tidung
Jun 4, 2013 at 6:06 pm

Wow, nice tips.
Will try it on my web soon
Thank you

Denny Toko Komputer
Jun 4, 2013 at 6:11 pm

Great share..
Thank you

Mops - Household
Jun 7, 2013 at 12:46 pm

Hey !
This sounds interesting. I will definitely apply this in my next project.
I really liked this post.
Thanks for the coding.
Mops – Household

Chris
Jun 10, 2013 at 8:26 pm

Hi,
In case any of you are trying to use 4:3 video in an iframe like youtube adjust the css to this:
.video-container {
height: 0;
overflow: hidden;
padding-bottom: 75%;
padding-top: 0;
position: relative;
}

Test Shred Review
Jan 12, 2017 at 8:54 am

Simply wish to say your article is as astonishing.

The clarity in your post is simply excellent and i could assume you’re an expert on this subject.
Fine with your permission allow me to grab your feed to keep uodated with forthcoming post.

Thanks a million and please keep up the enjoyable work.

Post Comment or Questions

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.