css - Trouble making height responsive youtube embed with bootstrap -


I am using a BootStrap Grid system to create a responsive site that displays content in containers, anytime It is not more than the height, and the display width using three columns, until it is not seen through a small screen, then 1 column in that position. The problem is that, my YouTube embed is not responsive. I tried to use it 100%, auto using several bootstrap classes, switching from embed to iFrame and trying out many ideas. Nothing is working, I end up with a small stable height of about 100px, no width Here's my HTML

  & lt; Div class = "row" & gt; & Lt; Div class = "col-md-4" & gt; & Lt; Center & gt; & Lt; H1 & gt; Once upon a lifetime & lt; / H1> & Lt; P & gt; Far far away, the words are located behind the mountain, away from Wokianya and Consonantia countries, in the dark texts live on the banks of the semantics, directly into a large language ocean, in the bookmarkgrow, a small river named Duden flows from their place and Provides it with the necessary rheglia. This is a paradigmatic country in which the roasted parts of sentences fly in your mouth. Even there is no control about the blind texts about all the powerful poning, it is a nearly unorthodox life. One day though, a small line of dark text, under the name of Lorem Ipsum, decided to go for a distant world of grammar. Big Oxmox did not advise them to do this, because there were thousands of bad minorities, wild question marks and crooked semi-semicolon, but Little Blind Text did not hear it. He packed his seven sizes, made his belt and made himself on the way. When he reached the hills of the Italic Mountains, he was seen last seen on the horizon of his hometown, Bookmarksg & lt; / P & gt; & Lt; / Center & gt; & Lt; / Div & gt; & Lt; Div class = "col-md-4" & gt; & Lt; Center & gt; & Lt; Embed width = "80%" height = "100%" src = "// www.youtube.com/embed/NOcjwN3jkZ4?autoplay=1" frameborder = "0" acceptable slide-button & gt; & Lt; / Embed & gt; & Lt; / Center & gt; & Lt; / Div & gt; & Lt; Div class = "col-md-4" & gt; & Lt; Center & gt; & Lt; H1 & gt; Check it out! & Lt; / H1> & Lt; A href = "http://wwww.link.xyz" & gt; & Lt; H3 & gt; Http: //wwww.link.xyz< / H3 & gt; & Lt; / A & gt; & Lt; / Center & gt; & Lt; / Div & gt; & Lt; / Div & gt;   

And here's some CSS that I'm using to stop horizontal scrolls.

  html, body {max-width: 100%; Height: 100%; Overflow-X: Hidden; }   

Please help.

Using any of the snippets given below make browsers an intrinsic proportion of their respective block width Will allow the video dimension to be determined on a scale that will scale properly on any device.

  & lt ;! - 16: 9 aspect ratio - & gt; & Lt; Div class = "embed-responsive embed-responsive-169" & gt; & Lt; Iframe class = "embed-response-object" src = "// www.youtube.com/embed/NOcjwN3jkZ4?autoplay=1"></iframe> & Lt; / Div & gt; & Lt ;! - 4: 3 aspect ratio - & gt; & Lt; Div class = "embed-responsive embed-responsive -4 by 3" & gt; & Lt; Iframe class = "embed-response-object" src = "// www.youtube.com/embed/NOcjwN3jkZ4?autoplay=1"></iframe> & Lt; / Div & gt;             P>

Comments

Popular posts from this blog

ios - Adding an SKSpriteNode to SKScene from a child SKSpriteNode -

Matlab transpose a table vector -

c# - Textbox not clickable but editable -