如何裁剪视频播放在iframe使用CSS?

Question

如何在HTML中裁剪视频以及应该在CSS中添加哪些内容

<h3>Nepal vs Indonesia</h3>
<section class="videos">
<iframe width="560" height="315" 
src="https://www.media.gov.kw/LiveTV.aspx?PanChannel=KTVSports"
frameborder="0" allowfullscreen></iframe>
</section>

Answer 1

就像下面这样给一个类名，并根据你的需要设置CSS的高度和宽度。

<div class='video-wrapper'>

.video-wrapper {
position: relative;
height: 0;
padding-bottom: 56.25%;
}

.video-wrapper iframe {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}

<div class='video-wrapper'>
<iframe width="560" height="315" src="https://www.media.gov.kw/LiveTV.aspx?PanChannel=KTVSports" frameborder="0"
allowfullscreen></iframe>
</div>

Answer 2

您可以使用以下代码:

<div class="container">
<div class="video-wrap">
<iframe width="560" height="315" 
src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4"
frameborder="0" allowfullscreen></iframe>
</div>
</div>

.container{ max-width: 1024px; margin: 0 auto; background-color: aliceblue; height: 100vh; }
.container .video-wrap{ margin: 0 auto; width: 560px; }
.container .video-wrap iframe{ width: 100%; height: 315px; }