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