disabling blackbars on youtube embed iFrame
29,592
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>
Comments
-
Ümit Aparı almost 2 years
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: 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.
-
ru4ert about 3 yearsHERO OF MY DAY 😎😎😎
-
Ashik about 2 yearsin which div I should give
embed-responsive embed-responsive-16by9
class?