<style>
@import url("https://fonts.googleapis.com/css?family=Roboto:400,400i,700");
body{
  overflow-x: hidden;
  font-family: Roboto, sans-serif;
}

.video-container{
  width: 100vw;
  height: 100vh;
}

 iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100vw;
  height: 100vh;
  transform: translate(-50%, -50%);
}

h1{
  background: rgba(0,0,0,0.5);
  padding: 10px;
}

#text{
  position: absolute;
  color: #FFFFFF;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

@media (min-aspect-ratio: 16/9) {
  .video-container iframe {
    height: 56.25vw;
  }
}
@media (max-aspect-ratio: 16/9) {
  .video-container iframe {
    width: 177.78vh;
  }
}

</style>



<div class="video-container">
  <iframe src="https://www.youtube.com/embed/jlkXyi0wOOA?controls=0&autoplay=1&mute=1"></iframe>
</div>

<div id="text">
  <h1>Use a youtube video as a full screen background with CSS</h1>
</div>

Close

Post a Comment

Previous Post Next Post

Help:

FAQs:

How to download any file from this website ?

You can download all the files on our site. We usually share the link of Google Drive from here you can securely and very quickly collect any PDF or all other files. One more thing to keep in mind is that this site does not post any kind of fake download, so wherever you see PDF download or file download, remember that you can download your desired PDF or other files from that post. Each download button has a timer attached. Basically, it takes some time for the files to be ready, so the download timer is given. There may be some automatic download timers, in which case there is nothing to be afraid of when you see the timer. There will be no accident when the timer runs out. Wait there with some of your precious time.