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

I'm trying to set a YouTube video as the background on a project I'm working on and all the research I've been doing has been less that helpful. I haven't found anything that even has mention of this being possible or not anywhere, so I don't know if this even is possible. Something as simple as "that's not possible" would be really helpful. This isn't something I need an answer to urgently, so no pressure.

Thanks in advance for the help!

CodePudding user response：

Juts push the iframe in the background with: position: fixed and a negative z-index - However for redundancy you should upload the evideo to your webspace and incldue it directly as video or media tag.

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>

CodePudding user response：

This is possible. I put a quick codepen for you. https://codepen.io/CrystalRcodes/pen/ExbRVXw see if this helps you. Let me know.

.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 >
    <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>