Responsive Fullscreen Youtube Video With No Black Bars

How to make responsive youtube video card/image with no black bars on top and bottom?

Try this, Thil will work, adjust the scale value as you wanted.

You can learn more about youtube image thumbnails here

.media-video-container {  position: relative;  overflow: hidden;}
.media-video-container img {  /*position: absolute;  top: 0;  left: 0;*/  width: 100%;  height: 100%;  object-fit: cover;  object-position: center;  -webkit-transform: scaleY(1.2);  -moz-transform: scaleY(1.2);  -ms-transform: scaleY(1.2);  transform: scaleY(1.2);}

<div class="list p-y">  <div class="item col-xs-12 col-sm-6 col-md-4 col-lg-3 video" *ngFor="let item of media">    <a class="block box card-item b-a media-item text-left" target="blank" href="{{item?.url}}" title="{{item?.name}}">      <span class="block clear img-card b-b b-light text-center media-video-container ">        <img class="h-auto h-full w-full" src="{{getMediaImageUrl(item)}}" alt="{{item?.name}}"/>      </span>      <div class="box-body p-y-sm">        <div class="block clear text-sm">          {{item?.name}}        </div>      </div>      <button *ngIf="item.type == 'video'" class="ytp-button ytp-large-play-button" aria-label="Play">        <svg height="100%" version="1.1" viewBox="0 0 68 48" width="100%">          <path class="ytp-large-play-button-bg" d="..."            fill="#212121" fill-opacity="0.8"></path>          <path d="M 45,24 27,14 27,34" fill="#fff"></path>        </svg>      </button>    </a>  </div></div>

disabling blackbars on youtube embed iFrame

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>

Fullscreen video without black borders

Try adding to your CSS

.iframe-box {
    max-width: 1280px; /* video width */
    max-height: 720px; /* video height */
}

This means that width: 100%; height: 100% will let the element will expand as much as it can, until it hits a maximum height or width of 720px or 1280px, respectively.

If the screen you're viewing it on has a greater resolution, the node will stop expanding and you'll not have black borders.

Further, afaik the following is not valid CSS, are you using a library or something?

#full-bg {
    .iframe-box {
        foo: bar;
    }
}

Edit after answer accepted: I just thought of a completely different way to achieve this, but it would require you to change a lot of your CSS

.fittobox {                /* give fit to box an aspect ratio */
    display: inline-block; /* let it be styled thusly */
    padding: 0;            /* get rid of pre-styling */
    margin: 0;
    width: 100%;           /* take up full width available */
    padding-top: 56.25%;   /* give aspect ratio of 16:9; "720 / 1280 = 0.5625" */
    height: 0px;           /* don't want it to expand beyond padding */
    position: relative;    /* allow for absolute positioning of child elements */
}

.fittobox > iframe {
    position: absolute;    /* expand to fill */
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
}

youtube video screen black bars scenario

Check it out on CodePen for viewport resizing to see the responsiveness.
https://codepen.io/rickydam/pen/dzyEoR/left/

Refer to this similar question.

Responsive fullscreen youtube video with no black bars?

This article sums up embedding a responsive Youtube video using CSS.

https://avexdesigns.com/responsive-youtube-embed/

.video-container {  position: relative;  padding-bottom: 56.25%;  padding-top: 0px; height: 0; overflow: hidden;} .video-container iframe,.video-container object,.video-container embed {  position: absolute;  top: 0;  left: 0;  width: 100%;  height: 100%;}

<div class="video-container">  <iframe src="https://www.youtube.com/embed/EgPRLAJB13c?autoplay=1&showinfo=0&controls=0" frameborder="0" allowfullscreen></iframe></div>

How do I embed YouTube videos without black bars?

Um. Try uploading a 16x9 video instead of a 4x3 one.