Add Responsive YouTube and Vimeo Videos to Any Website

Add Responsive YouTube and Vimeo Videos to Any Website

YouTube, Vimeo and other video hosts make it easy to embed their players in your own website.

However, Youtube, Vimeo and others don’t provide responsive videos by default.

In this short tutorial, we’ll show you how to make YouTube, Vimeo and other videos responsive in your website, using just a few lines of CSS.

EmbedPress - WordPress Embed Facebook Embeds

If you’re using WordPress, we highly recommend you check out the EmbedPress plugin. You can create responsive YouTube and Facebook video embeds, using just the URL.

Download EmbedPress

Step #1. Get the YouTube Embed Code

  • Go to Youtube.
  • Find the video you want to use on your website.
  • Click on Share >> Embed >> Right click and copy the HTML code.
responsivevideos 1

Step #2. Use the Embed Code

Paste this embed code in your website. It will look similar to this:

{codecitation}
<iframe width="420" height="315" src="http://www.youtube.com/embed/6xisazZX9bA" frameborder="0" allowfullscreen></iframe>
{/codecitation}

Step #3. Modify the Embed Code

Add a div tag around the embed code. Use the CSS class video-responsive so that your code now looks like this:

{codecitation}<div class="video-responsive">
<iframe width="420" height="315" src="http://www.youtube.com/embed/6xisazZX9bA" frameborder="0" allowfullscreen></iframe>
</div>{/codecitation}

Step #4. Add the CSS

Now add some CSS properties inside one of your stylesheet files:

{codecitation}.video-responsive{
overflow:hidden;
padding-bottom:56.25%;
position:relative;
height:0;
}
.video-responsive iframe{
left:0;
top:0;
height:100%;
width:100%;
position:absolute;
}{/codecitation}

Your videos now will be responsive. Try resizing your browser to see it in action.

This same process works for Vimeo videos and any other service that uses an iframe tag.

Author

  • Valentin Garcia

    Valentin discovered Joomla in 2010, and since then he has considered it as the best CMS. Valentin has been coding extensions and templates for Joomla for many years and truly enjoys helping people build their own websites with Open Source tools. He lives in San Julián, Jalisco, México.

0 0 votes
Article Rating
Subscribe
Notify of
111 Comments
Oldest
Newest
Inline Feedbacks
View all comments
exoduser
10 years ago

Hi Valentin Garcia,
How do you think the AllVideos plugin for Joomla? Or any other recommended plugin?

htmgarcia
10 years ago
Reply to  Zomi Daily

Hi ZomiDaily!

You mean a Joomla plugin for videos that supports responsive? – if that is the case, check this one: [url=http://www.joomlabamboo.com/joomla-extensions/fitvids-responsive-video-for-joomla]http://www.joomlabamboo.com…[/url]

pepperstreet
10 years ago
Reply to  Zomi Daily

Newer versions include a “responsive” template. You have to choose it in plugin parameters.

exoduser
10 years ago
Reply to  pepperstreet

Yes, I’m using AllVideos for all my Joomla site, and it is nicely responsive. Cheers!

hopekiah
hopekiah
10 years ago

Valentin, this is fantastic! First, I tried it on my site and it didn’t work. I realized then that, minor detail, my template was not responsive. I tested on a site with a responsive template and checked it on my iphone. Vertically, the vid was cropped left and right, but when I turned the phone horizontal, it was perfect. Anyone watching a vid on a smart phone with turn it sideways, so this is GREAT. Thanks so much.

htmgarcia
10 years ago
Reply to  hopekiah

Hi Hope!

I’m glad this tutorial was helpful for you 🙂

hopekiah
hopekiah
10 years ago

Definitely! I just shared it on my blog and facebook.

Thomas_Sandberg
Thomas_Sandberg
10 years ago

This is nice. We like to have the option to watch the video by clicking a

button ‘Watch Clip” Can this be done using this code and css?

htmgarcia
10 years ago

Hi Thomas!

With CSS is possible add text using the content property, but I may need more details to have a clear idea of your suggestion.

Andrew Sampson
Andrew Sampson
10 years ago

Hi Valentin

Very helpful

I have one question – the video we added stretches to the full width of the outer containing element of our template.

if you look on this page you will see what I mean

[url=http://www.asafeworldforwomen.org/appeals/donate-cofapri.html?view=donation]http://www.asafeworldforwom…[/url]

How do we make sure the video size is not increased to the full size of the page?

This is caused by having the 100% height and width set on the class “video-container iframe, .video-container object, .video-container embed, .video-container video”

If that is reduced to to a smaller % the responsiveness is lost on mobile.

Any thoughts?

Adamo di Firenze
Adamo di Firenze
10 years ago

Amazing, well done.

Joshua Smith
Joshua Smith
10 years ago

Thanks for the tip, Valentin!

Garry Pickles
Garry Pickles
10 years ago

best explanation I have found so far easy to understand

Erick Navarro
Erick Navarro
9 years ago

I cant believe some one made this so easy, I literally copy/paste this and it worked, thanks

Kevin
Kevin
9 years ago

Thanks man, used it and it works. Happy to learn from you!

Joe G
Joe G
9 years ago

How do you put wording on the left and have a responsive video on the right?

Tiwingo
Tiwingo
9 years ago

it works fine. thank you so much. very simple , very useful ))

Fernando
Fernando
9 years ago

Is it possible to set the responsive video with a max width display of 500px?

indra alfaatih
indra alfaatih
8 years ago

Thanks it works, my you tube video become responsive as I want it to be

Glenn
Glenn
8 years ago

Awesome. You are a Godsend. I’ve been editing and adapting my blog. This was my last hurdle.

joe
joe
8 years ago

This was great, really useful!

rupali
rupali
8 years ago

Hi.. Please guide me where to paste first css codes. i’m new to joomla.. tried it in home.css but didnt worked. thanks in advance.

Gavin Hardy
Gavin Hardy
3 years ago
Reply to  rupali

Hi,
I found that I had to remove the width=”420″ height=”315″ from the iframe embed code to get it to work. 

vanessadds
vanessadds
7 years ago

I was having some difficulties and this worked perfectly for me! Thanks a lot!

htmgarcia
6 years ago
Reply to  vanessadds

We’re happy to help, @vanessadds
Have a good day.

jwood
jwood
6 years ago

Perfect! Just what I needed to display some Vimeo videos.

Thinh Phung
Thinh Phung
6 years ago

Absolutely working well, you save my day!

mihha
mihha
6 years ago
Reply to  Thinh Phung

Glad to hear that our article helped you to achieve what you were looking for

Christos Tsamaldoupis
Christos Tsamaldoupis
6 years ago

How can i use this only for mobile ? my site is responsive and i want to use for a video for the mobile version only

mihha
mihha
6 years ago

You should used media queries and target “video-responsive” CSS class only for a specific screen resolutions

jwood
jwood
6 years ago
Reply to  mihha

How can i use this only for mobile? my site is responsive and i want to use for a video for the mobile version only

Aryasesa Nugrahua Latuihamallo
Aryasesa Nugrahua Latuihamallo
6 years ago

Hi Valentin, I have tried your code, but now my youtube player on my site will not show the play and pause button underneath, can you please help?

htmgarcia
6 years ago

Hi Aryasesa Nugrahua Latuihamallo
check if other CSS is causing that behavior and or you added YouTube parameters that may disable those buttons.
Regards

Patricia
Patricia
6 years ago

Thanks!
I’m also trying to put one Youtube and one Vimeo side to side (and then 100% width one over the other at 500px and smaller) and I can’t… could you please help me?

Philip Harper
Philip Harper
6 years ago

Jobs-a-goodun’ worked a treat x

Timmy Miano
Timmy Miano
6 years ago

First I built my own media queries for every conceivable size of video that would fit my adaptive site’s main content container. Tedious, but fine. THEN I needed to put video somewhere else IN DIFFERENT SIZES and almost had to do it all over again, but divided by 2.5 to fit in the new space. Your solution is so elegant that I can scrap all those media queries and just use it instead. Thanks for reducing not only the work I had to do, but also the overall size of my page! Very slick.

Nathan Dickison
Nathan Dickison
6 years ago

The ‘height:0’ was collapsing for me on Firefox (Mac OS 55.0.3 (64-bit)). Adding ‘display:table’ to the .video-responsive fixed it for me.

Anonymous
Anonymous
6 years ago

This helped a lot thank you! However, for those of us that are complete noobs with HTML, you might add in where the CSS style sheet is at to add the 2nd part of the code. I had to go to a YouTube video on another page to figure that out, but I still copy and pasted your code, and it worked. I didn’t build the pages I’m working in, I’m just adding stuff in the code.

Edson
Edson
6 years ago

Could be more interesting to describe every CSS line and its purpose. Specially that bottom padding. I can figure out that percentage of 56.25% is a result of 100% divided by the 16/9 wide screen’s aspect ratio (100 / 1.77778).

Robert M Furst
Robert M Furst
6 years ago

Thank you. The only issue I had was with regards to the amount of white space that appeared before my image. The way I got around it was to apply the responsive to Tablets and Phones only and not bother with defining it in my CSS for desktop or larger viewers.

piyush
piyush
6 years ago

Thanks, Its easy to use and perfect response.

Patricia Peribáñez
Patricia Peribáñez
6 years ago

Thanks!
I’m also trying to put one Youtube and one Vimeo side to side (and then 100% width one over the other at 500px and smaller) and I can’t… could you please help me?

ken@kenthedesigner.com
ken@kenthedesigner.com
6 years ago

Excellent, this works tutorial performs pertfectly Dreamweaver CS6.

Marcus Buckner
Marcus Buckner
6 years ago

Thanks this rocks!

Minerva
Minerva
6 years ago

Gracias Valentin!!

Len
Len
6 years ago

Still works – thank you!

Russell
Russell
6 years ago

With this approach you will end up with letterboxing (black lines on the sides of the container). A better approach is to change the height of the container using javascript.

Ragnar
Ragnar
6 years ago

Many thank you! It’s working! ^^

leo
leo
5 years ago

wow, that’s fantastic all with no plugin. thx.

Julian Illman
Julian Illman
5 years ago

Thank you so much Valentin for this incredibly helpful advice. I have implemented this within Teachable on a couple of videos where I wanted to show video content from YouTube and it works like a dream. I’ve bookmarked this for future reference. Great job.

K
K
5 years ago

Thanks Valentin! I don’t usually leave comments; but, I was looking for a solution. I went through several sites/posts before finding yours. It is so clear, laid out step by step. It was easy to follow. I have just added the

to all my videos and it is working! UR a magician! Thanks for sharing your time and talent! K
Sage Adams
Sage Adams
5 years ago

This is very helpful, thank you. For me it was also useful to add yet another

around the outer .video-responsive

with these attributes: height: 75%; width: 75%; margin-left: auto; margin-right: auto; -> that achieves a nice, centered effect while also decreasing the size of the videos just a tish!
Erec
Erec
5 years ago

Hi Valentin! Thank you for the straightforward response!

I am having trouble with it though…I wonder if I am putting the CSS in the right place? Is there any easy way to describe where it should go?

Thank you 🙂

james
james
5 years ago

Awesome and simple.

Loren
Loren
5 years ago

How do you control the container size of the youtube video?

Ad-w00000
Ad-w00000
5 years ago

Thanks Dude. It may be old but it still works.

Charles Boisseau
Charles Boisseau
5 years ago

I don’t have access to the CSS code on my website – it’s controlled by admins and it’s difficult to get them to be “responsive.” Is there a way to add this CSS file to my html code on the page I’m working on inside a content management system system?

Anonymous
Anonymous
5 years ago

Works like a charm!

Dave
Dave
5 years ago

Excellent!! Thank you!

I work with an outside vendor and cant add css to the site easily, but was able to add the styling inline and worked like a charm!! Just don’t forget to add the styling to the iframe code as well!

[code]

[/code]
[code]    [/code]
[code]

[/code]

DoronAdd
DoronAdd
5 years ago

Thank you so much.
Has been helpful.

Roger H
Roger H
5 years ago

This might be another level of complexity, but how would you size the video so it fits the window size when the site first loads as the video size it overflowing the height?

Kathy
Kathy
5 years ago

Hi Valentin,
Vimeo videos stretch to the full length of the page. Is there a fix for this? Thank you so much.

J
J
5 years ago

Thanks for the tip!  It worked like a charm.

J

Bob Kieffer
Bob Kieffer
4 years ago

The info you provided works great. However, how do I center the re-sized video on the page. I tried the

command around the container and that does not work. Any suggestions…perhaps some kind of CSS code would be the solutions. Any help would be appreciated.

111
0
Would love your thoughts, please comment.x
()
x