Javascript 是否有任何方法可以在图像上添加视频，而无需视频标签的绝对位置？

设计要求：有一个iPhone的背景图像，上面有一个视频标签，在循环中播放视频。 所有与这个问题相关的答案都是将视频标签置于图像背景之上。但它在调整窗口大小时会导致问题

---

无需在图像上放置绝对视频标记，这将有助于在更改窗口大小时提高响应速度。为此，请查看下面的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%;
}

#电视集装箱{
背景图片：url（'../img/mobile no-send.png'）；
宽度：24%；
背景大小：100%100%；
位置：相对位置；
背景重复：无重复；
左：1.8%；
右翼：1.6%；
垫底：5%；
垫面：3.3%；
}
录像带{
最大宽度：100%；
最大高度：100%；
位置：相对位置；
溢出：隐藏；
对象匹配：填充；
边界半径：2%；
}