How to make responsive video player with css

According to, 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.


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:


.responsive-video-player iframe{


<div class="responsive-video-player">

This example you can find here

Hope this article will be useful to you!

Have a nice code day!

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s