视频标签html上方的图片答案

【问题标题】：Image above video tag html视频标签html上方的图片
【发布时间】：2022-01-26 09:21:53
【问题描述】：

我想在我的网站上制作电视，我需要在视频like this 上方居中放置图像。

这是html代码：

.video-container {
  height:300;
   width: 300;
background-color: #01CA78;
}

video {
  padding:1cm;
    display: block;
    margin: 0 auto;
}

svg {
  position: relative;
  top: 10px;
}

.overlay {
  position:absolute;
  top:0;
}

 <svg viewBox="0 0 500 45" style="position:relative;top:10px;">
  <path d="M513.99969,11.40851c-4.01483,1.60236-7.94287,3.15778-11.49982,4.34344-18,6-21.4-4.2-23.3-8.5-2.3-5.4-11.8-5.5-33.8,3.9-7.2,3.1-12.8,5.1-17,5.8-3.7.6-9.4.8-13.4-2.1-4.9-3.6-3.3-10.2-9.9-11.2-7.2-1.1-19.7,4.2-29.6,8.1-10.3,4.1-15.1,6.4-22.7,5.2s-8.7-7.6-9.9-9.8c-1.6-3-5.1-5.6-18.8-1.4-15.8,4.9-24.3,10.2-33,11.4-12.5,1.6-14.9-4.7-16.5-8.1-1.8-4-4.3-8.8-22.8-2.4-18.3,6.4-23.3,10.6-32.8,10.7-16.8.1-9.5-12.6-19.6-13.6-8.4-.8-17.4,3.1-27.9,7.4a92.97487,92.97487,0,0,1-13.7,4.9c-15.1,3.8-18.7-2.7-20.8-7.3-.4-.9-1.2-3.3-3.2-4.3-4.1-2-12.7-1-19.1,1.9-7.8,3.5-18.4,11.2-26.1,11.8-5.1.4-6.8-1.8-7.1-3.7a4.67826,4.67826,0,0,1,.5-2.6c.6-1.3,1.5-3.7-.2-5.8-2.1-2.7-9.3-2.2-9.3-2.2-14.7.7-21,5.4-32,10.5-7,3.2-12,4.2-15.8,3.4a9.88372,9.88372,0,0,1-3.3-1.5c-1.4-1.1-3.1-3.4-2-5.9a6.43484,6.43484,0,0,1,2.2-2.7,8.635,8.635,0,0,0,1.3-1.4c1.4-1.9.8-5.1-2.9-6a17.60543,17.60543,0,0,0-9.9,1.2c-3.7,1.6-6.7,3.1-10.1,4.8V43.40125H513.99969Z" fill="#01CA78"></path>
   </svg>
   <div class="video-container">
<video autoplay loop "video.mov">
  <source src="video.mov" type="video/mp4">
  <div class="overlay">
    <img src="TV.png" width="500" height="600">
    </div>
  </video>

【问题讨论】：

错字：position: absolite 应该是 position:absolute

标签： html

【解决方案1】：

插入具有如下变换值的父标签：

<div style="transform: rotate(180deg);">
<svg viewBox="0 0 500 45" style="position:relative;top:10px;">
<path d="M513.99969,11.40851c-4.01483,1.60236-7.94287,3.15778-11.49982,4.34344-18,6-21.4-4.2-23.3-8.5-2.3-5.4-11.8-5.5-33.8,3.9-7.2,3.1-12.8,5.1-17,5.8-3.7.6-9.4.8-13.4-2.1-4.9-3.6-3.3-10.2-9.9-11.2-7.2-1.1-19.7,4.2-29.6,8.1-10.3,4.1-15.1,6.4-22.7,5.2s-8.7-7.6-9.9-9.8c-1.6-3-5.1-5.6-18.8-1.4-15.8,4.9-24.3,10.2-33,11.4-12.5,1.6-14.9-4.7-16.5-8.1-1.8-4-4.3-8.8-22.8-2.4-18.3,6.4-23.3,10.6-32.8,10.7-16.8.1-9.5-12.6-19.6-13.6-8.4-.8-17.4,3.1-27.9,7.4a92.97487,92.97487,0,0,1-13.7,4.9c-15.1,3.8-18.7-2.7-20.8-7.3-.4-.9-1.2-3.3-3.2-4.3-4.1-2-12.7-1-19.1,1.9-7.8,3.5-18.4,11.2-26.1,11.8-5.1.4-6.8-1.8-7.1-3.7a4.67826,4.67826,0,0,1,.5-2.6c.6-1.3,1.5-3.7-.2-5.8-2.1-2.7-9.3-2.2-9.3-2.2-14.7.7-21,5.4-32,10.5-7,3.2-12,4.2-15.8,3.4a9.88372,9.88372,0,0,1-3.3-1.5c-1.4-1.1-3.1-3.4-2-5.9a6.43484,6.43484,0,0,1,2.2-2.7,8.635,8.635,0,0,0,1.3-1.4c1.4-1.9.8-5.1-2.9-6a17.60543,17.60543,0,0,0-9.9,1.2c-3.7,1.6-6.7,3.1-10.1,4.8V43.40125H513.99969Z" fill="#01CA78"></path>
 </svg>
 <div class="video-container">
<video autoplay loop>
<source src="video.mov" type="video/mp4">
<div class="overlay">
  <img src="TV.png" width="500" height="600">
  </div>
</video>
</div>

重复左右方向的标签，但将父标签旋转为“90度”和“-90度”。

【讨论】：