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!
