Fully Responsive Video with Bootstrap

Question

I'm designing a full-screen responsive website with videos and images. That means that the website is never bigger than your screen size. I'm using Bootstrap 3 to design it; I have had no problems with the images, but I'm having a lot of trouble with the video. I'm using Bootstrap's standard responsive video embed:

<div class="col-sm-12 col-md-12 col-full-parent">
    <div class="embed-responsive embed-responsive-16by9">
        <iframe src="http://www.youtube.com/embed/..."></iframe>
    </div>
</div>

The problem is, it resizes if you change the width, but not if you change the height.

Any ideas about how I can solve this?

Edit: The parent col container is the max height and width it should ever be, but it doesnt fit it.

The purpose of embed-responsive-16by9 is to maintain a 16:9 aspect ratio for the embedded video. Do you get the result you're looking for if you remove that class? — VLS
usually height doesn't change when responsive. You should use media queries to change the video's height — Jose Osorio
If I remove that class the video doesnt even show, but i want to keep the 16:9 ratio but adjusted to the screen, without scrollbars. — Noel Algora Igual
Set the height on embed-responsive to whatever it needs to be (it's 0 by default). — VLS
It needs to be at max his parent height, but setting it to 100% or auto does not solve it. What happens is that embed-responsive-16by9 keeps the ratio using padding and not height. — Noel Algora Igual

Noel Algora Igual Noel Algora Igual · Accepted Answer · 2015-08-10T22:16:49

I ended finding a solution, not using css and just using javascript. It just fits the video iframe (#iframe_youtube) as big as posible in 16:9 ratio in his parent div (#main_container)

$( document ).ready(function() {
    resizeVideo();
} );

$(window).resize(function() {
    resizeVideo();
});

function resizeVideo() {
    var content = $('#main_container');
    var iframe = $('#iframe_youtube');

    var contentH = content.height();
    var contentW = content.width();
    var resH = (contentW * 9)/ 16;
    var resW = (contentH * 16)/ 9;

    if(contentH < resH) {
        resH = contentH;
    }
    if(contentW < resW){
        resW = contentW;
    }

    iframe.css('height',resH);
    iframe.css('width',resW);
}

Fully Responsive Video with Bootstrap

1 Answers