有什么方法可以在图像上添加视频而没有视频标签的绝对位置？

Question

设计要求：有一个iPhone的背景图片，最上面是一个视频标签，用于循环播放视频。 与该问题有关的所有答案都是使视频标签绝对位于该图像背景之上。但是在调整窗口大小时会导致问题。

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%;
}