0

I'm embedding a youtube video to act as my header image on my homepage. The video loads perfectly and is responsive to my window but when I hit play, the black bars appear. Is there a way to remove that?

homepage screenshot

video when playing

Here's a sample of my HTML/CSS

.responsive-vid {
position:relative;
padding-bottom:56.25%;
padding-top:30px;
height:0;
overflow:hidden;
}

.responsive-vid iframe, .responsive-vid object, .yresponsive-vid embed {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
<div class="responsive-vid"><iframe src="https://www.youtube.com/embed/kY_ySOpTYIE?rel=0&amp;controls=0&amp;showinfo=0" width="560" height="315" frameborder="0" allowfullscreen="allowfullscreen"></iframe></div>
Rebecca A
  • 13
  • 4
  • Possible duplicate of [this](https://stackoverflow.com/questions/43954836/disabling-blackbars-on-youtube-embed-iframe). Try setting padding-bottom:42.1545667%; and unsetting padding-top. The snippet doesnt work for me, I created [this jsfiddle](https://jsfiddle.net/o3rp6an9/45/) – Julián Esteban Salomón Torres Apr 26 '18 at 17:16
  • this worked! thank you!!! – Rebecca A Apr 26 '18 at 17:20

0 Answers0