Web Design & Development

Responsive Videos: Make YouTube Videos fit into any Device View

Responsive Designs

Responsive Designs : Responsive VideosResponsive Design is the very first secret behind every popular website or blog. Responsive designs make your site structure auto adjustable according to the browser or the device you are visiting the site from. Responsive Videos is one another part of it. Today in the morning when I was checking my emails I found this email from one of our loyal readers.

Reader's Email

According to the email, the reader is facing a small problem related to YouTube videos. It’s already clear from the above email screenshot the problem is somewhat because of static structure of YouTube Videos. It looks fine on desktop computers, but pretty much broke the design when viewing on a mobile device. So for sorting this issue out we need a Responsive YouTube embed code. You would think that videos that have 100% width set would automatically just resize to the surrounding container. Well, thats is not the case.

The fix of this issue is actually quite simple, and here is how.

How to make YouTube Videos Responsive Videos?

We created a CSS code for this. You will just need to wrap the YouTube embed code with a <div> associated with that CSS Stylesheet. Then specify the child elements (iframe, object embed) 100% width, 100% height, with absolute position. This will force the embed elements to expand full-width automatically.

Here is the CSS Code for this. Add this code to your site’s stylesheet file.

.responsive-video {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px; height: 0; overflow: hidden;
}
.responsive-video iframe,
.responsive-video object,
.responsive-video embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

Now after adding the CSS you will need to wrap your video’s iframe code inside the given div tags.

<div class=”responsive-video”>
Your YouTube iFrame Code Here….
</div>

Live Example:

Final Words!

It’s working fine for me. Let me know if you are facing any problem. Cheers!

KEEP CALM AND MAKE YOUTUBE VIDEOS RESPONSIVE

4 Comments

  1. 1
    • 2

      As I can see you are using Blogger. So you need to place the CSS code before ]]></b:skin> in your Blogger Template. Then wrap the video code with:

      <div class="responsive-video">
      Your YouTube iFrame Code Here…
      </div>

      After doing all this, clear browser’s cache and it will work like a charm.

      And one more thing, I saw you have Pinterest button widget button in your blog that works when hover over an image. That’s a great plugin but at some place I saw it’s clashing with your site’s other parts like social button. Have a look:

      Pinterest Button

      See, that Pinterest button is covering your social media buttons which I think is not a good sign. I noticed it that’s why though of notifying you also 🙂

      Feel free to ask if still it doesn’t works 🙂

      • 3
  2. 4

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>