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

Question

As a user I want to be able to define a Youtube video to cover a certain container 100% both width a height. The proportions should be kept, so in some cases, the video is cut off.

I've tried with object-fit:cover, but when embeding the Youtube video as an iframe, the player is displayed perfectly with 100% width and height, but the video is scaled to fit the widht and then I get the black bars in the top & bottom.

Here's the PHP

        else if($youtube_video AND is_admin() === false) {
            echo    '<div class="media-container ' . $shrink . ' ' . $mediaplacement . '">' .
                    '<iframe class="video" type="text/html" src="' . $youtube_video . '?autoplay=1&mute=1&loop=1&modestbranding=1&playsinline=1&rel=0" frameborder="0"></iframe>' .
                    '</div>';
        }

And then the css

    & .video{
        object-fit: cover;
        width:100%;
        height:100%;
    }

    & .media-container{
        position:absolute;
        top:0;
        right:0;
        width:50%;
        height:100%;
        background-repeat: no-repeat;

I've also tried with this question Force iframe YouTube video to center fit and full cover the screen in the background using HTML5 CSS3

I just need the video looping, no controlls or play button.

you are not using object-fit: cover; right. please post your html and css — Dejan.S

Rat Rat · Accepted Answer · 2019-08-12T09:16:58

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)

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

1 Answers