CODEWITHSUNDEEP
htmlcssvideobackgroundresponsive
user7284843
user7284843

Reputation:

Background video too big

screenshot on phone

on phone

screenshot on PC

on laptop

This is a video in a background.

the problem.
when the website is on fullscreen the video size is to big. I tried to make it smaller with margin top . but its cuts the video in half. the video has to stay in the orginal conditon on full screen and smal screen. how do I do this? 

<body>

    <div id="videoContainer" class="half-black">
        <div class="videoWrapper">
            <video autoplay>
                <source src="video/warwick.mp4" type="video/mp4">
            </video>
        </div>
    </div>
    <div id="infoContainer" class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
    </div>

CSS:

    #videoContainer{
    height:auto;
    background-color:darkslateblue;
    border-bottom:5px solid black;
}
#infoContainer{
    background-color:dodgerblue;
    height:40%;
}

.videoWrapper > video {
  width: 100%;
  margin-top:-35%;


}
.videoWrapper{
  overflow: hidden;
}

Upvotes: 0

Views: 3468

Answers (1)

vikrantnegi
vikrantnegi

Reputation: 2492

You can use object-fit CSS property to fit the video in its container. Use and see if this solves your problem. Also, no need of margin property. 

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

Upvotes: 3

Related Questions