Design Ninja

Design Ninja

By David Moore

Monday, 24 September 2012

Responsive Youtube Videos

Responsive Youtube Videos

One of the stumbling blocks I happened across when jumping into the wonderful world of responsive web design was how to go about achieving responsive Youtube videos (the real conundrum was how to achieve responsive Iframes & Objects as this is how a Youtube video is embedded). After tinkering with some code and some googling I came up with a working solution which I then implemented into our own site.

As it turns out the solution was fairly simple so I thought it would be great to create a quick blog post to help anyone else who may be facing the same dilemma.

THE SOLUTION

First you need to create a container <div> to wrap up your video embed code, this container needs to have position declared as relative within the CSS styles. Then we add some bottom padding to the div, it's this padding which makes the magic happen. The padding allows us to maintain a correct ratio for our video. For a 16:9 (widescreen) ratio we would need to apply a padding percentage of 56.25% (we arrive at this percentage using the following calculation 9 divided by 16) and for a 4:3 ratio we would use a bottom padding of 75% (again the calculation for arriving at this percentage is 3 divided by 4).

Now we have our container ready to roll we need to add some styling to our child elements. We want our Iframe / Object to expand full width and height to the container we have created to wrap it in. We do this by setting the position to absolute, with a width and height of 100%.

Bada bing bada boom responsive Youtube Videos

The code for reference is:

CSS

#video_container {
position: relative;
padding-bottom: 56.25%;
}

#video_container iframe,
#video_container object,
#video_container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

HTML

<div id="video_container">
<iframe width="640" height="360" src="http://www.youtube-nocookie.com/embed/ZUG9qYTJMsI" frameborder="0" allowfullscreen></iframe>
</div>

We can expand on this for different ratios by adding in a class for the different video ratios we want to achieve.

See below (note the additional styling for our new classes and this class is then applied to our containing div in the HTML):

CSS

#video_container {
position: relative;
}

/* 16:9 Video Ratio */
.widescreen {
padding-bottom: 56.25%;
}

/* 4:3 Video Ratio */
.fourbythree {
padding-bottom: 75%;
}

#video_container iframe,
#video_container object,
#video_container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

HTML

<div id="video_container" class="widescreen">
<iframe width="640" height="360" src="http://www.youtube-nocookie.com/embed/ZUG9qYTJMsI" frameborder="0" allowfullscreen></iframe>
</div>

Now if you don't want to go through the above there is another solution, this is a Jquery plugin called FitVids.js, with this Jquery plugin set-up videos will automatically resize like magic all by themselves without you needing to touch a line of CSS. Hats off Chris Coyier and Paravel the creators of this plugin - its truly marvellous stuff.

Comments (9)

  • Admire The Web

    25 September 2012 at 19:33 |
    Great post, really informative. You need some social buttons so we can share this !! :Y:
  • David

    26 September 2012 at 16:34 |
    Hi ATW, glad you enjoyed it. We have been debating the inclusion of social buttons for a little while here at Symphony HQ. As you can see the current state is we don't have them, but we hope if someone finds the post really useful they will still share with their social circle without the buttons. But your comment has meant the debate is hotting up again in the office. In or Out?
  • Lena

    04 October 2012 at 19:48 |
    Thanky Thanky for all this good information!
  • Tyler

    07 October 2012 at 16:30 |
    Very good info. Lucky me I came across your blog by chance (stumbleupon).
    I've bookmarked it for later!
    • Mike

      08 October 2012 at 16:25 |
      Glad we could help you both out
  • Lyda

    10 October 2012 at 19:35 |
    Thanks for sharing your info. I really appreciate your efforts and
    I am waiting for your further write ups thanks once again.
    • Mike

      11 October 2012 at 08:51 |
      We're glad you finding our posts helpful. Keep an eye out for more posts in the near future.
  • Jimmy

    21 October 2012 at 21:53 |
    Awesome post.
    • Mike

      22 October 2012 at 11:05 |
      Thanks for the comment. We are glad that you found this post helpful. Watch out for more posts coming soon!

Leave a comment

You are commenting as guest.

Search by Date

Latest Big Bad Blog Post

ExpressionEngine Force HTTPS For Selected Sections with Htaccess

ExpressionEngine Force HTTPS For Selected Sections with Htaccess

Have you ever wanted to force a HTTPS connection for your ExpressionEngine website? If so, you may have also wanted to 'unforce' that connection for other areas of your website, either for performance issues or because maintaining both HTTP and HTTPS for the same section can be tricky. Avoid those pesky browser warnings about unsafe (non HTTPS) assets with this htaccess rewrite.

Continue Reading

Latest twitterings

  • @reverseRett proud Daddy and Uncle!!xx-- Delivered by Feed43 service

    27 May 2014 | 11:40 am View full tweet
  • Check out "Internet Archive" on Vimeo http://vimeo.com/59207751  #Vimeo-- Delivered by Feed43 service

    24 May 2014 | 1:03 pm View full tweet

Fill in our contact form

  • Please complete all the fields

Thanks for your message! We will get back to you ASAP!

* indicates a required field

TOP