Categories
Tutorials

How to make Embedded Video Responsive

Responsive design has been buzz word since 2010 when Ethan marcotte coined it for the very first time. But since mobile traffic started to take over desktop visitors, unwittingly, people started to apply responsive design approach on their existing websites.

Ethan Marcotte in his article for alistapart, mentioned three simple rules to make your website adapt to the screen size.

  • Fluid Grids
  • Media queries, and
  • Flexible Media

In this article we are going to cover the last rule which covers all the web media whether these are images, videos or embeddable media

HTML5 Video

Before html5, we have had some terrible ways to use audio and video as media element. We have to rely on some third party plugins, especially adobe flash player (in fact it was only way to play videos online, in the past). These days, client browser supports native videos. Next we’ll discuss how to make them responsive.

Adding video to your website is as simple as that

<video controls>  
    <sourcesrc="movie.mp4"type="video/mp4">  
    <sourcesrc="movie.ogg"type="video/ogg">  
</video>

The above code snippet includes both ogg and mpeg-4 video formats. Well supported video format will be chosen over others.

video{
    width:100%;
    max-width:400px;
    }

Setting width:100% will fill the entire browser width. If the width of main container of the content is 960px, then the 960px space is too much for 400px width video, so in this we can limit it by adding max-width property.

Embeddable Videos:

The other great way to add videos to your website is to embed it from video sharing websites like youtube, vimeo. They do come with some advantages, like the server hosting your website don’t have to worry about the bandwidth required for videos. It’s the responsibility of the one, that is originally hosting your video whether it’s Youtube or Vimeo.

We will take a sample video link of a youtube video as an example.

<iframe width="560" height="315" src="//www.youtube.com/embed/yF5-6AcohQw" frameborder="0" allowfullscreen></iframe>

We can just follow pattern iframe by setting it’s with to 100%. This will stretch the iframe video to all the available space to the edge of the browser, but it will not maintain the aspect ratio of the video. To maintain the aspect ratio and as well as making it responsive we can use an intrinsic ratio method.

Trick: Intrinsic Ratio as a padding:

For this trick to work we need to have a container element that will hold iframe as a child. The intrinsic ratio is calculated by dividing height with width of embeddable video. In this case we have

315 / 560 \* 100 = 56.25%.

Here is the final code with HTML and CSS.

<div class="iframe-container">
<iframe width="560" height="315" src="//www.youtube.com/embed/yF5-6AcohQw" frameborder="0" allowfullscreen></iframe></div>
.iframe-container{
padding-bottom: 56.25%;
height:0;
position:relative;
}

iframe{
position: absolute;
top:0;
left:0;
height:100%;
width:100%;
}

Conclusion

We have gone through styling html5 native video element and then covered how to adapt videos that are embedded from other video providing services.

If there are more effective ways to make a video responsive, feel free to share it with us

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.