时间戳

首页 > 解决方案 > 如何将 iframe 移到 div 后面？css

javascript - 如何将 iframe 移到 div 后面？css

问题描述

我们如何将 iframe 移动到 div 后面。

下面是一个示例，我想在iframe前面显示“custom_title”div 。它最初是显示的，但是当我们单击全屏时，“custom_title” div 最终消失了。

有人知道如何实现这一目标吗？我这里有codepen

注意：片段中不显示全屏图标，我不知道为什么。但是你检查一下codepen。

.title_container {
  position: fixed;
  z-index: 9999;
  left: 50%;
  transform: translateX(-50%);
  top: 10%;
  background-color: white;
  color: black;
}
<div>
   <iframe src="https://player.vimeo.com/video/347119375?color=ef2200&byline=0&portrait=0" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen="true" style="position:absolute;top:0;left:0;width:100%;height:100%;" title="0vid1.mp4" data-ready="true"></iframe>
   <div class="title_container">Custom Title</div>
</div>

标签： javascripthtmlcssiframevimeo

解决方案

全屏移动将视频从文档中拉出以进行渲染。这会将您放置在其顶部的文本留在后面。

要实现这一点，您需要使div全屏而不是视频（然后您需要适当地格式化视频以使其充满 div）。

我怀疑您是否可以覆盖 Vimeo 的按钮来实现这一点，因此您需要添加自己的按钮。

推荐阅读