Flash / Video Responsiveness while maintaining Aspect Ratio

Lets take an aspect ratio of 16:9 since it is the most common ratio for videos/media. We all know that setting width: 100% and height: 100% will make it responsive in terms of size but in terms of keeping the same aspect ratio, this is not done right. View the demo below to compare the top example (bad) and the one below it (maintains aspect ratio).

 

View Demo Here

And this is how simple it is to get it done, using a stylesheet or by putting a style tag at the head of the page and pasting the following:


.player-container { /* Change to Default Size - Max player size */
max-width: 640px;
max-height: 360px;
}
#player {
position: relative;
padding-bottom: 56.25%; /* Maintains an aspect ratio of 16:9 */
padding-top: 25px;
height: 0;
}
#player object, #player embed{ /* for flash / embeds */
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

 

And finally, this is how it would look like in your html:

<div class="player-container">
<div id="player">

</div>
</div>

Note: player-container is optional and is only suggested when embedding in an empty page or else the whole page will be the player.

 

Thanks and Enjoy 🙂