Force Iframe Youtube Video to Center Fit and Full Cover the Screen in the Background Using HTML5 CSS3

Force iframe YouTube video to center fit and full cover the screen in the background using HTML5 CSS3

For a real full screen solution, this can be achieved like this:

HTML

<div class="video-background">
    <div class="video-foreground">
      <iframe src="https://www.youtube.com/embed/I4agXcHLySs?controls=0&showinfo=0&rel=0&autoplay=1&loop=1&mute=1" frameborder="0" allowfullscreen></iframe>
    </div>
  </div>

CSS

* { box-sizing: border-box; }
.video-background {
  background: #000;
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: -99;
}
.video-foreground,
.video-background iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

@media (min-aspect-ratio: 16/9) {
  .video-foreground { height: 300%; top: -100%; }
}
@media (max-aspect-ratio: 16/9) {
  .video-foreground { width: 300%; left: -100%; }
}
@media all and (max-width: 600px) {
.vid-info { width: 50%; padding: .5rem; }
.vid-info h1 { margin-bottom: .2rem; }
}
@media all and (max-width: 500px) {
.vid-info .acronym { display: none; }
}

It is not perfect, e.g. it does not work well with extreme aspect ratios of the container, but is doing a great job in most situations. Here is a working example:

https://codepen.io/hnrchrdl/pen/YzPwjBV

Edit: Check Oliver's answer, he seems to have an improved version of this solution.

Is there a way to fill a div with a youtube video, like the background-size:cover css property

I think I have found a way. You might want to change those CSS values because it's very fiddly and probably not right for your needs. It loops, video is in mute, and there are no controls/title. Have a look. To remove the parameters, remove them from the iframe source.

<!DOCTYPE html>
<style>
* { box-sizing: border-box; }
.video-background {
  background: #000;
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: -99;
}
.video-foreground,
.video-background iframe {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 80%;
  height: 80%;
  pointer-events: none;
}

@media (min-aspect-ratio: 16/9) {
  .video-foreground { height: 300%; top: -100%; }
}
@media (max-aspect-ratio: 16/9) {
  .video-foreground { width: 300%; left: -100%; }
}
@media all and (max-width: 600px) {
.vid-info { width: 50%; padding: .5rem; }
.vid-info h1 { margin-bottom: .2rem; }
}
@media all and (max-width: 500px) {
.vid-info .acronym { display: none; }
}
</style>

<html>
 <div class="video-background"> 
    <div class="video-foreground">
      <iframe src="https://www.youtube.com/embed/0LjMhy0w8xs?controls=0&showinfo=0&rel=0&autoplay=1&loop=1&mute=1&rel=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    </div>
  </div>
</html>

I hope this has answered your question. Please reply if it still doesn't meet your needs!
Edit: I don't think you actually need PHP to do this...

Thanks,
Rat (Joey M)

How to display youtube video in background with full screen

.banner-video{position: relative; z-index: 0; width:100%; height:759px;}

@media only screen and (min-width:1400px){
.banner-video{height:843px;}
}

@media only screen and (min-width:1520px){
.banner-video{height:948px;}
}

@media only screen and (max-width:1199px){
.banner-video {height:576px;}
}

@media only screen and (max-width: 992px){
.banner-video {height:432px;}
}

@media only screen and (max-width: 640px){
.banner-video {height:318px;}
}

@media only screen and (max-width: 400px){
.banner-video {height: 180px;}
}

Finally This Works for me. Got the video in full screen.

Force Iframe Youtube Video to Center Fit and Full Cover the Screen in the Background Using HTML5 CSS3