How to implement a responsive Youtube / Vimeo embed iframe with Twitter Bootstrap 3?

Responsive Twitter Bootstrap 3 Video HTML5

Share this content with your friends


In many themes I’ve used great videos from youtube and vimeo. First time when I wanted to add embeded video to my Bootstrap Theme I faced big problem – fixed dimensions. Each video on youtube and vimeo has fixed width and height, but my themes are responsive that’s why I had to find good solution.

My solution is very easy to use.

Copy this code to your main CSS file,

.responsive-video {
position: relative;
padding-bottom: 56.25%;
padding-top: 60px; overflow: hidden;
}


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

and then put your embede video to

<div class="responsive-vide">...</div>.

That’s it! Now you can use responsive videos on your site.