javascript - 有没有办法在没有视频标签绝对位置的情况下在图像上添加视频？

Question

设计需求:有一张iPhone的背景图片，上面有一个循环播放视频的video标签。 与此问题相关的所有答案都是使视频标签绝对位于该图像背景之上。但它会在调整窗口大小时引起问题。

Answer 1

无需在图像上定位绝对视频标签也是可能的，这将有助于在更改窗口大小时提高响应速度。为此目的检查以下 css 和 html 代码。

<div id="tv_container">
 <video autoplay muted loop>
  <source src="http://commondatastorage.googleapis.com/gtv-videos- 
        bucket/sample/ForBiggerBlazes.mp4" type="video/mp4">
  </source>
 </video>
</div>

#tv_container {
 background-image: url('../img/mobile-no-send.png');
 width: 24%;
 background-size: 100% 100%;
 position: relative;
 background-repeat: no-repeat;
 padding-left:  1.8%;
 padding-right:  1.6%;
 padding-bottom: 5%;
 padding-top: 3.3%;
}

video {
  max-width:100%; 
  max-height:100%;
  position: relative;
  overflow: hidden;
  object-fit: fill;
  border-radius: 2%;
}