时间戳

首页 > 解决方案 > 视频 iframe 重叠内容 - html/css

html - 视频 iframe 重叠内容 - html/css

问题描述

我有一个简单的 html 来显示视频，但它看起来不正确。下面是屏幕截图、HTML 和 CSS。如何阻止视频重叠并正确显示？

.video-responsive {
  text-align: center;
  overflow: hidden;
  height: 0;
}

.video-responsive iframe {
  margin: 0;
  padding: 0;
  height: 70%;
  width: 70%;
  display: block;
  position: absolute;
}
<p>Watch the video recording to see the whole conference</p>

<div class="video-responsive">
  <iframe width="320" height="240" src="https://www.youtube.com/embed/UHpaxaJ-GgU" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

<br/>

<p>If you have any questions, please email us at contact@metis.com</p>

在此处输入图像描述

标签： htmlcss

解决方案

取下position: absolute并height: 0放在包装纸上。

.video-responsive {
  text-align: center;
}

.video-responsive iframe {
  margin: 0;
  padding: 0;
  height: 70%;
  width: 70%;
  display: block;
}
<p>Watch the video recording to see the whole conference</p>

<div class="video-responsive">
  <iframe width="320" height="240" src="https://www.youtube.com/embed/UHpaxaJ-GgU" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

<br/>

<p>If you have any questions, please email us at contact@metis.com</p>

推荐阅读