8

I embed a video from youtube to my web page I want it to be stretch 100% on the screen with no blackbars. Although I give it a width of 100%, it still has some blackbars on the sides of the video. How can I get rid of it?

Screenshot:Screenshot snippet: https://jsfiddle.net/o3rp6an9/1/

<div id="video">
    <iframe width="100%" height="100%" src="https://www.youtube.com/embed/zWAiQJvwb8Q?autoplay=1&loop=1&controls=0&rel=0&showinfo=0&playlist=zWAiQJvwb8Q&modestbranding=1" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
</div>

#video {
    height:100%;
    width:100% !important;
    background-size:100% 100%;
    position:relative;
    overflow:hidden;
}

There's another question about this but it basically didn't help me.

Ümit Aparı
  • 540
  • 2
  • 6
  • 23
  • 2
    Possible duplicate of [Responsive fullscreen youtube video with no black bars?](http://stackoverflow.com/questions/26617154/responsive-fullscreen-youtube-video-with-no-black-bars) – mehulmpt May 13 '17 at 15:29

2 Answers2

23

You want to absolutely position the video within a wrapper that sets vertical padding that matches the video's aspect ratio. To get the padding/aspect ratio, divide the video's height by the width and multiply by 100 to get a percentage.

* {padding:0;margin:0;box-sizing:border-box;}

#video {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
}

#video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
<div id="video">
  <iframe width="100%" height="100%" src="https://www.youtube.com/embed/zWAiQJvwb8Q?  autoplay=1&loop=1&controls=0&rel=0&showinfo=0&playlist=zWAiQJvwb8Q&modestbranding=1" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
</div>
Matias Jurfest
  • 1,378
  • 16
  • 25
Michael Coker
  • 52,626
  • 5
  • 64
  • 64
2

Using Bootstrap 4 classes embed-responsive embed-responsive-16by9 along with this css hack did it for me.

.embed-responsive.embed-responsive-16by9 iframe {
    clip-path: inset(1px 1px);
}

I found the solution here: https://github.com/twbs/bootstrap/issues/26284#issuecomment-392017929

HischT
  • 933
  • 1
  • 9
  • 26