All geek questions in one place

Bootstrap responsive embed does not work as expected

Embedding video in the Bootstrap 3.1 mesh system; video does not expand the entire width of the grid column. How to make it 100% wide for the parent column while maintaining aspect ratio? Also, even if I use 4: 3 video, it looks very wide in a browser with a very short height. here is my code:

<div class="row"> <div class="col-md-8"> . <!-- other items--> . </div> <div class="col-md-4"> <div class="embed-responsive embed-responsive-4by3"> <iframe class="embed-responsive-item" src="//www.youtube.com/embed/gYhi3pAiQY4"></iframe> </div> </div> </div>
+6
source share
2 answers

As Rob said in a comment :

Pretty sure that embedding is not added until 3.2. Try updating.

+4
source

If you cannot update, for one reason or another, you can add styles yourself. This is pretty straight forward. Here is SASS:

 // Embeds responsive // // Credit: Nicolas Gallagher and SUIT CSS. .embed-responsive { position: relative; display: block; height: 0; padding: 0; overflow: hidden; .embed-responsive-item, iframe, embed, object, video { position: absolute; top: 0; left: 0; bottom: 0; height: 100%; width: 100%; border: 0; } } // Modifier class for 16:9 aspect ratio .embed-responsive-16by9 { padding-bottom: 56.25%; } // Modifier class for 4:3 aspect ratio .embed-responsive-4by3 { padding-bottom: 75%; }
+1
source

Source: https://habr.com/ru/post/973377/

More articles:


All Articles