如何制作响应中的YouTube视频卡/图像，顶部和底部没有黑条？

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:

我想在卡片图像中显示youtube视频,其顶部和底部没有黑条。这是我的全卡代码:

.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?

响应式全屏YouTube视频,没有黑条?

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

响应式视频iframe(保持宽高比),只有css?

1 个解决方案

#1

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

试试这个,Thil会工作,根据需要调整比例值。

You can learn more about youtube image thumbnails here

您可以在此处了解有关youtube图像缩略图的更多信息

.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>

#1