CODEWITHSUNDEEP
javascripthtmlcss
Nodira
Nodira

Reputation: 666

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

I want to display the youtube video in card image with no black bars on top and bottom of it. Here is the code that I have for full card:

enter image description here

.media-video-container {
  position: relative;
  overflow: hidden;
}
.media-video-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
<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>

I would really appreciate any help :)

NOTE: I have already tried:

Responsive fullscreen youtube video with no black bars?

Responsive video iframes (keeping aspect ratio), with only css?

Upvotes: 3

Views: 988

Answers (1)

Ramesh
Ramesh

Reputation: 2403

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>

Upvotes: 1

Related Questions