That’s because YouTube maintains the proportions. If you want it to fill the width of the page, you should then increase the height too.
Solution 1 :
Solution 2 :
First, wrap your div in another div element that will have fixed position.
Then, you set CSS for the myVideo element and iframe you have, using absolute position and full height/width for both.
Finally, for this to work, you need some media queries based on the aspect ratio, after and before 16/9, to position it correctly. You can test different position properties too.
.video-wrapper {
background: #000;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
#myVideo, .video-wrapper iframe {
position: absolute;
right: 0;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
}
@media (min-aspect-ratio: 16/9) {
#myVideo { height: 300%; top: -100%; }
}
@media (max-aspect-ratio: 16/9) {
#myVideo { width: 300%; left: -100%; }
}<div class="video-wrapper">
<div id="myVideo" >
<iframe src="https://www.youtube-nocookie.com/embed/eLZUlh1AwrM?loop=1&autoplay=1&playlist=eLZUlh1AwrM&disablekb=1&controls=0&fs=0&modestbranding=1&mute=1&showinfo=0&enablejsapi=1&widgetid=1" frameborder="0" allowfullscreen ></iframe>
</div>
</div>Problem :
I’m trying to set youtube video as bredcrumb background, I get stuck with setting video width to full screen size. As you will see the image below video is showed in the center of iframe and its not streched to full screen.
/Black bars from left and right the video/
Thats my code:
#myVideo {
position: absolute;
right: 0;
top: 0;
bottom: 0;
width: 100vw; /*now it is 100% of viewport (window) width.*/
display: inline-block;
min-height: 100%;
z-index: -99;
}<div id="myVideo" >
<iframe width="100%" height="300px;" src="https://www.youtube-nocookie.com/embed/eLZUlh1AwrM?loop=1&autoplay=1&playlist=eLZUlh1AwrM&disablekb=1&controls=0&fs=0&modestbranding=1&mute=1&showinfo=0&enablejsapi=1&widgetid=1" frameborder="0" allowfullscreen ></iframe>
</div>Comments
Comment posted by Dereckkkk
Alright, but I want to place it as breadcrumb background, so cant increase the height. Is it possible to crop it, or something..?