CSS: Responsive Video

The CSS Framework i worked on is able to handle all types of responsiveness, but not video. So I did a bit of research and found a piece of code that does the trick.

Wrap the embedded video in a container as follows:

<div class="video-container">
    <iframe width="640" height="480" src="//link-to-video" frameborder="0" allowfullscreen></iframe>
</div>

Add the following css:

.video-container {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
}
.video-container iframe,  
.video-container object,  
.video-container embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

Leave a Reply

Your email address will not be published. Required fields are marked *