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 🙂

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s