html5 中是否可以将 iframe 设为背景？

Question

我正在尝试将 YouTube 视频设置为我正在进行的项目的背景，但我一直在做的所有研究都没有那么有用。

我什至没有发现任何地方提到这可能或不可能，所以我不知道这是否可能。可能答案是“那不可能”。

Answer 1

只需在后台推送 iframe：position: fixed 和否定 z-index - 但是为了冗余，您应该将视频上传到您的网站空间并直接将其作为视频或媒体标签包含在内。

iframe {
  position: fixed;
  inset: 0;
  height: 100vh;
  width: 100vw;
  z-index: -1;
}


/* for demo purpose only */
* {
  color: white;
}

<iframe width="560" height="315" src="https://www.youtube.com/embed/rLtwToALM60" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

<p>Random content</p>
<p>Random content</p>
<p>Random content</p>
<p>Random content</p>
<p>Random content</p>

Answer 2

这是可能的。我为你准备了一个快速代码笔。 https://codepen.io/CrystalRcodes/pen/ExbRVXw 看看这是否对你有帮助。让我知道。

.text {
  position: relative;
  right: 10px;
  transition: 0.5s;
  outline: 0px;
  border: 0px;
  border-radius: 1px;
  background-color: hsl(172deg 18% 27% / 0%);
  font-size: 25px;
  top: 200px;
  text-align: center;
  color: red;
}

<div>
  <div class="text">
    <h1>The Video Background </h1>
    This is a sample text or div
  </div>

  <iframe width="100%" height="500px" src="https://www.youtube.com/embed/vYPYgHwf2KA" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

html5 中是否可以将 iframe 设为背景？

Is it possible to make an iframe a background in html5?

html

iframe