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!