How to make responsive video player with css

According to smartinsights.com, mobile exceeds PC internet usage for first time in history at 2014. This is why is so important to have a mobile or responsive version of your website. If you have a video player on your site, this article maybe helpful for you.

In this article, i will show you a simple css trick to make your embed video player from youtube, vimeo or etc. responsive with 16:9 ratio.

First, you should create a css class for wrapper container ( e.g. .responsive-video-player) of the video. Position of the wrapper container must be relative, because child element will be with absolute position. The width of the wrapper, should be 100% of the parent element. One of the most important property to set height of the wrapper container is padding-bottom with value 56.25%.

Why is 56.25%?

This is because 56.25% height of 100% width is equals to 16:9 ratio.

.responsive-video-player{
    position:relative;
    width:100%;
    padding-bottom:56.25%;
}

Second, you should define a style for child iframe element. Position for this element will be absolute. Width and height will be 100% to fit parent container.

… and that’s it 🙂

Here is example usage:

CSS

.responsive-video-player{
    position:relative;
    width:100%;
    padding-bottom:56.25%;
}
.responsive-video-player iframe{
    position:absolute;
    width:100%;
    height:100%;
}

HTML

<div class="responsive-video-player">
    <iframe 
        src="https://www.youtube.com/embed/xTYJpmljVmM?rel=0&showinfo=0" 
        frameborder="0" 
        allowfullscreen>      
    </iframe>
</div>

This example you can find here

Hope this article will be useful to you!

Have a nice code day!