Properly embedding Youtube video into bootstrap 3 0 page

Question

I need to embed a YouTube video into my responsive site but it s not scaling correctly  especially on mobile   It looks fine on desktop and tablets but once you get below a viewport width of 600  the video breaks its container  To view the whole video on mobile you need to pinch out to a point that the rest of the content only fills about 1 2 the screen vertically  Not so good    I want the text content to be 1 3 wide and the video to be 2 3 wide on desktop and tablets and stacked on mobile with the video and content both 100  of the viewport width  I ve tried using width  100   on the iframe but then the height doesn t scale correctly as you resize and the video either gets stretched or squished    I also need to do it with CSS only as i m simply laying my stylesheets over stock bootstrap 3 0   Here s my code     lt div class  container  gt                           lt div class  row  gt                   lt div class  col-sm-4  gt Content  This is content  it is not meant to be read or understood  Something random goes here  it can be whatever you want  it s just blankish content provided so that it fills up some space  pretty boring huh  lt  div gt                   lt div class  col-sm-8  gt                      lt iframe width  600  height  338  src  http   www youtube com embed KgMt0dtr4Vc  frameborder  0  allowfullscreen gt  lt  iframe gt                   lt  div gt    lt  div gt

User · Answer

There is a Bootstrap3 native solution  http   getbootstrap com components  responsive-embed  since Bootstrap 3 2 0   If you are using Bootstrap  lt  v3 2 0 so look into  responsive-embed less  file of v3 2 0 - possibly you can use copy this code in your case  it works for me in v3 1 1

User · Answer

I know it s late  I have the same issue with an old custom theme  just added to boostrap css    embed-responsive     position  relative    display  block    height  0    padding  0    overflow  hidden     embed-responsive  embed-responsive-item   embed-responsive iframe   embed-responsive embed   embed-responsive object   embed-responsive video     position  absolute    top  0    bottom  0    left  0    width  100     height  100     border  0     embed-responsive-16by9     padding-bottom  56 25      embed-responsive-4by3     padding-bottom  75       And for the video    lt div class  embed-responsive embed-responsive-16by9   gt   lt iframe class  embed-responsive-item   src  https   www youtube com embed jVIxe3YLNs8  gt  lt  iframe gt   lt  div gt

User · Answer

I use bootstrap 3 x as well and the following code fore responsive youtube video embedding works like charm for me    videoWrapperOuter     max-width 640px     margin-left auto    margin-right auto     videoWrapperInner     float  none    clear  both    width  100     position  relative    padding-bottom  50     padding-top  25px    height  0     videoWrapperInner iframe     position  absolute    top  0    left  0    width  100     height  100      lt div class  videoWrapperOuter  gt     lt div class  videoWrapperInner  gt       lt iframe src    www youtube com embed C6-TWRn0k4I         frameborder  0  allowfullscreen gt  lt  iframe gt     lt  div gt   lt  div gt    I gave a similiar answer on another thread  Shrink a YouTube video to responsive width   but I guess my answers can help here as well

User · Answer

It also depend on how you style your site with bootstrap  In my example  I am using col-md-12 for my video div  and add class col-sm-12 for the iframe  so when resize to smaller screen  the video will not view squeezed  I add also height to the iframe    lt div class  col-md-12  gt   lt iframe class  col-sm-12  height  333  frameborder  0  wmode  Opaque  allowfullscreen    src  https   www youtube com embed oqDRPoPDehE wmode transparent  gt   lt  div gt

User · Answer

Well it has a simple and easy solution  You can make your video easily to fit for any device and screen size   Here is the HTML and CSS code    x000D   x000D   yt-container   x000D   position relative  x000D   padding-bottom 56 25   x000D   padding-top 30px  x000D   height 0  x000D   overflow hidden  x000D    x000D   x000D   yt-container iframe   yt-container object   yt-container embed   x000D   position absolute  x000D   top 0  x000D   left 0  x000D   width 100   x000D   height 100   x000D    x000D   lt div class  yt-container  gt  x000D      lt iframe src  https   www youtube com embed hfQdkBOxXTc  frameborder  0  allowfullscreen gt  lt  iframe gt  x000D   lt  div gt  x000D   x000D   x000D    Source  https   www codespeedy com make-youtube-embed-video-responsive-using-css

User · Answer

Have a think about wrapping the videos inside something which you can make flexible via bootsrap   The bootstrap is not a magic tool  its just a layout engine  You almost have it in your example   Just use the grid provided by bootstrap and remove strict sizing s on the iframe  Use the bootstrap class guides for the grid    For example    lt iframe class  col-lg-2 col-md-6 col-sm-12 col-xs-12  gt    You will see how the class of the iframe will change then given your resolution   A Fiddel too   http   jsfiddle net RsSAT

User · Answer

This works fine for me          delimitador          width 100           margin auto             contenedor          height 0px          width 100             max-width 560px     As   establecemos el ancho m  ximo  si lo queremos             padding-top 56 25      Relaci  n  16 9   56 25             position relative             iframe              position absolute              height 100               width 100               top 0px              left 0px          and then   lt div class  delimitador  gt   lt div class  contenedor  gt     youtube code   lt  div gt   lt  div gt

[css] Properly embedding Youtube video into bootstrap 3.0 page

Examples related to css

Examples related to twitter-bootstrap

Examples related to youtube

Examples related to embed