CSS: Elastic Videos - Web Designer Wall

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.

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

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 ;)

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

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)?

Jul 27, 2011 at 12:08 pm

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

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.

Nov 28, 2011 at 4:06 pm

THANKS FOR THIS AWESOME TRICK!

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 ;)

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]

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.

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

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

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.