Unable to make html5 background video responsive

responsive video background
responsive video background codepen
html5 video background examples
autoplay video background
html5 video scale to fit div
video background browser support
responsive video header
background video css

I'm working on a webpage that has a navbar on the left-hand side and the content area on the right. The content area has an html5 full-screen background video. Everything is perfect except the background video is not responsive. What I want are the video to be full screen and viewable in each and every screen size.

Sorry if this question has been posted before, but I didn't find a working solution from the other answers.

This is the code:

HTML

<div class="col-sm-9 col-md-10 col-lg-10 col-xl-10">
    <div class="main-content">                  
    <!-- background video -->
         <div class="videoContainer">
              <div class="overlay">
                   <video autoplay loop muted>
                        <source src="images/backgrounds/1.mp4" type="video/mp4">
                   </video>
                   <div class="video-box-shadow"></div>
              </div>
         </div>
     </div>
</div>

CSS

.main-content{
    height: 100vh;
    background: black;
}

/*BACKGROUND VIDEO*/

.videoContainer {
    position: relative;
    width: 100%;
    height: 100vh;
    background-attachment: fixed;
    overflow: hidden;
}

.videoContainer .video-box-shadow{
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-box-shadow: inset 8px 0px 15px rgba(0,0,0,1), 0px 0px 0px 0px rgba(0,0,0,1);
    -moz-box-shadow: inset 8px 0px 15px rgba(0,0,0,1), 0px 0px 0px 0px rgba(0,0,0,1);
    box-shadow: inset 8px 0px 15px rgba(0,0,0,1), 0px 0px 0px 0px rgba(0,0,0,1);
    top: 0;
    left: 0;
    z-index: 2;
    background: linear-gradient(320deg,
        rgba(0,0,0,1),
        rgba(0,0,0,0.1),
        rgba(0,0,0,0.1),
        rgba(0,0,0,1));
}

.videoContainer .overlay {
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
}


.videoContainer .overlay video {
    min-width: 100%;
    min-height: 100%;
    position: relative;
    z-index: 1;
}

Try using object-fit and object-position - these CSS properties allow any media to be scaled as if it were background images, using the actual container element as the wrapper.

.videoContainer .overlay video {
    min-width: 100%;
    min-height: 100%;
    position: relative;
    z-index: 1;
    object-fit: cover;
    object-position: center center;
}

For example (with an image, but it works on any kind of visual media type):

img {
  width: 200px;
  height: 150px;
}
img.fit {
  object-fit: cover;
  object-position: 50% 50%;
}
<img src="http://placehold.it/200x200" />
<img src="http://placehold.it/200x200" class="fit" />

Responsive video resizing, Let's change that by looking at how we can keep video responsive across wanted to make video fully responsive on the web. We'll start here: HTML ratio when the parent container changes, similar to background-size: I'm aware of the missing support in some browsers, however, you might be able to� Basically, when you add a video on your website using HTM5 <video> tag, It will not get in proper size on mobile devices. To make it resize on mobile (Responsive), We need to play with CSS. To make an HTML5 video responsive is a little more complex than an image. We can’t just make it mobile-friendly by just adding max-width:100%

you can use @media query in css for each screen or use bootstrap

HTML5 video not responsive, I can't get to display my video when my video in my page when my <video> is wrapped by a parent container. I'm actually trying to display a .video-wrapper { width: 100%; position: relative; padding-top: 56.25%; background-color: green; } I write correct video tag and write the css for image and video. It will make look the video good for users. How to Make Responsive Fullscreen HTML5 Video as Background. Let’s start with how the HTML can be written. We will define <video> tag with the source. I added autoplay, loop, poster and define an ID video. Now, We include two different sources because we want to make sure that the video should work

It looks like changing the min-width & min-height to plain width & height and adding object-fit:cover to your video element can accomplish what you want:

.videoContainer .overlay video {
    width: 100%;        /* Removed min- */
    height: 100%;       /* Removed min- */
    position: relative;
    z-index: 1;
    object-fit:cover;   /* Added this line */
}

I added a different video for testing which contains a watermark that allows you to see that it is centered.

Here is a jsfiddle of the code.

My testing displayed the video filling full height and width of screen while keeping it centered in Chrome, Firefox, and Opera. The only apparent downfall to removing the "min-" from height/width dimensions is that Edge then seems to have trouble filling the screen with video. However, it is at least responsive, where before it was not. I am unable to test in Safari.

Unable to make html5 background video responsive I'm working on , Unable to make html5 background video responsive I'm working on a webpage that has a navbar on the left-hand side and the content area on the right. This tutorial will walk you through how to add videos in HTML, and embed YouTube videos. Also how to make them responsive, create video backgrounds.

Responsive CSS3 / HTML5 Video Background In div No Javascript , This tutorial describes how to place an HTML5 video within a containing div Responsive CSS3 / HTML5 Video Background In div No Javascript Needed! I was able to accomplish this without having to use JavaScript at all! I stumbled upon this answer while trying to find something else on responsive videos. I implemented a responsive video element using similar code. This link may help make sense of some things Height equals width Pure CSS. Your code could look like this:

Fluid Width Video, So can't we just do this? <video width="100%" ></video>. Well, yep, you can! If you are using standard HTML5 video, that will make the video fit the width of video { /* override other styles to make responsive */ width: 100% main { background: white; height: 100vh; max-width: 400px; margin: 0 auto;� In this tutorial, I’m going to show how to add a responsive CSS video background to support all screen size and also showing static image instead of video for mobile devices too. You can find full source code at the end of this post. Here is the example page that we’re going to work on. I have a centered div with some text on it.

Full Page Background Video Styles, A video background that takes up the entire browser window. The biggest reason you don't, probably, is that you can't set a movie file as the background- image in CSS. You'll You're probably putting text on top of the video, so make sure it has enough Responsive Knockout Text With Looping Video. Using The width Property. If the width property is set to 100%, the video player will be responsive and scale up and down:

Comments
  • Have you looked into object-fit and object-position CSS properties? They allow you to simply stretch the video the the size you want, then crop it the way you like it. developer.mozilla.org/en-US/docs/Web/CSS/object-fit
  • Tried it. But still not responsive. Maybe a code is blocking it?
  • What do you mean ‘not responsive’? Can you add relevant HTML in that case? Maybe you are missing a viewport meta tag or something... if this didn’t make your video responsive, maybe your site isnt responsive...
  • If you cannot comment yet, earn the reputation to do so by giving good answers that explain how to do things and not mere suggestions.