Responsive Video Embeds with Bootstrap 3



https://i.ytimg.com/vi/oAPdNKTrBYA/hqdefault.jpg



Responsive Video Embeds with Bootstrap 3

Allow browsers to determine video or slideshow dimensions based on the width of their containing block by creating an intrinsic ratio that will properly scale on any device.

Rules are directly applied to iframe, embed, and object elements; optionally use an explicit descendant class .embed-responsive-item when you want to match the styling for other attributes.

Pro-Tip! You don’t need to include frameborder=”0″ in your frames as we override that for you.
Mohit Manuja

Original source


22 responses to “Responsive Video Embeds with Bootstrap 3”

  1. <div class="container">
    <div class="panel panel-warning">
       
            <div class="panel-heading">
        <p class="panel-title">Responsive video embed 16/9</p>    
            </div><!– End panel-heading –>
            
            <div class="panel-body">
            <div class="embed-responsive embed-responsive-16by9 hidden-xs">
                <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/oAPdNKTrBYA" allowfullscreen>                
                    </iframe>
                </div><!– End embed-responsive –>
                <p class="visible-xs hidden-xs">The video has benn removed for extra small size of your browser, so please move on to bigger screen size to view it.</p>
            </div><!– End panel-body –>
        </div><!– End panel –>
    </div><!– End Container –>

  2. Hi, a very good video thank you. I have a little problem.

    I did all the code which worked correctly but wanted to embed several videos in a grid. I installed the code in a col-xs-3, four of which were installed in the same row, but it did not work. Vanished OK at XS but video itself dos not scale in the col-xs-3 at any screen size.

    Any ideas?

Leave a Reply