Resizing Youtube videos on mobile devices

Sometimes it is difficult to resize YouTube videos “embedded” in HTML when viewed on mobile devices. One of the possibilities is described below.

Adding the Youtube iframe to the video-content div:

<div class="video-content">
     Front<iframe...></iframe>
</div>

with this CSS:

.video-content {
    position:relative;
    padding-bottom:56.25%;
    padding-top:30px;
    height:0;
    overflow:hidden;
}

.video-content iframe, .video-container object, .video-container embed {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}