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.

Instructor

  • 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
Blog Rating
Subscribe
Notify of
111 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
exoduser

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

htmgarcia

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

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

exoduser

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

hopekiah

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

Hi Hope!

I’m glad this tutorial was helpful for you 🙂

hopekiah

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

Thomas_Sandberg

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

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

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

Amazing, well done.

Joshua Smith

Thanks for the tip, Valentin!

Garry Pickles

best explanation I have found so far easy to understand

Erick Navarro

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

Kevin

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

Joe G

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

Tiwingo

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

Fernando

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

indra alfaatih

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

Glenn

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

joe

This was great, really useful!

rupali

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

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

vanessadds

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

htmgarcia

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

jwood

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

Thinh Phung

Absolutely working well, you save my day!

mihha

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

Christos Tsamaldoupis

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

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

jwood

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

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?

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

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

Jobs-a-goodun’ worked a treat x

Timmy Miano

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

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

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

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

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

Thanks, Its easy to use and perfect response.

Patricia Peribáñez

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

Excellent, this works tutorial performs pertfectly Dreamweaver CS6.

Marcus Buckner

Thanks this rocks!

Minerva

Gracias Valentin!!

Len

Still works – thank you!

Russell

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

Many thank you! It’s working! ^^

leo

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

Julian Illman

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

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

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

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

Awesome and simple.

Loren

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

Ad-w00000

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

Charles Boisseau

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

Works like a charm!

Dave

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

Thank you so much.
Has been helpful.

Roger H

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

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

J

Thanks for the tip!  It worked like a charm.

J

Bob Kieffer

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