Making embedded video responsive requires just few lines of CSS code. First of all, you need to wrap embedded video content with some container. It should look like this:
<div class="video-wrapper"> <iframe>...</iframe> </div> |
Next step for making your embedded video responsive is to apply some css styles:
.video-wrapper { position: relative; padding-bottom: 56.25%; /* 16:9 */ padding-top: 25px; height: 0; iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } } |
In the end, you should know that “crazy” paddings are not an accident. What you need is 56.25% padding-bottom to create 16:9 ratio for video content (9 divided by 16 is 0.5625) and top padding 25px will help you avoid issues such as broken box model.
Enjoy!