Just need a little validation on how to fit a background video fit to screen with an overlay text

Question

I am not able to fit the background video fit the screen for all devices and browsers. Somehow I am success full in doing it on chrome browser. Earlier it was clipping on both the sides of chrome browser. Now I realize that it is fine on chrome but the problem persists on IE edge

I Have already written the code just need a validation from experts or any improvement on it

here is the code pen https://codepen.io/jslearner1/pen/ydrzZz?editors=1100

*{
  margin:0;
  padding:0;
}

body{
    font-size: 62.5%;
    box-sizing: border-box;
    font-family: 'Lato',sans-serif;
    letter-spacing: 0.5px;
    line-height: 1.7;
    background-color: #fcfcfc;
    
}

.header{
    width: 100%;
    height: 100vh;
    font-size: 2rem;
    color: #fcfcfc;
    position: relative;
    z-index: 99;
    overflow: hidden;

    .overlay{
        position: absolute;
        top:0;
        left: 0;
        width: 100%;
        height: 100vh;
        background-color: rgba(#000000,0.8);
        z-index: 1;

        &__text{
            position: absolute;
            top:50%;
            left: 50%;
            transform: translate(-50%,-50%);
        }

    }

}

.bg_video{
    position: absolute;
    top:0;
    left:0;
    width: 100%;
    height: 100vh;
    object-fit: cover;

    
    
}

    <body>    
    <header class="header">
        
        <div class="overlay">
        <div class="overlay__text">
            <p>Welcome !!!</p>
        </div>
        </div>
      
        <!--  Video Taken from George Park Code pen -->
        <video autoplay muted loop class="bg_video">
            <source src="http://www.georgewpark.com/video/blurred-street.mp4" type="video/mp4">
            <source src="http://www.georgewpark.com/video/blurred-street.mp4" type="video/webm">
                your browser is not supported
        </video>
        

    </header>
    </body>

@dementis In general, the policy is that we don't copy code from off-site into posts due to copyright considerations (reference [1](//meta.stackoverflow.com/a/344512), [2](//meta.stackoverflow.com/q/348698)). In the specific case of CodePen, it is under the MIT license, so copying is OK. However, for MIT licensed code, you **must** copy the copyright notice and the MIT license along with the code, as that is a requirement of the MIT license. Those need to be included with what you copy into the post. — Makyen, Jul 13 '19 at 00:01
@Makyen... I have not copied anything, this is my code only thing is that I have taken the video cdn from a code pen code because I could not find anything online to show — jsLearner, Jul 13 '19 at 05:49
I'm sorry for the confusion. I was directing that comment to [dementis](/users/1743735), who made [the edit](/review/suggested-edits/23511450) to move the code from CodePen into your question. I was not *at all* trying to say/imply anything about you being the author, or not, of the code. I have no idea about that and didn't even think about it until I read your comment above. I was merely trying to explain to dementis that we almost always leave copying code into questions to the OP, and in the rare cases we can/do copy code, we need to scrupulously comply with the code's license. — Makyen, Jul 13 '19 at 06:01
@Makyen The thought of licensing hadn't even crossed my mind. I understand what you're saying, and only moved the code over because [SO required](https://imgur.com/jCFwIVc) actual code to accompany codepen links in order to display the question properly. I took OP's comment "I want to edit this" as tacit consent. I doubt that would hold up in court, but hopefully you can understand my thought process. I'll bear this in mind in the future. — apoteet, Jul 14 '19 at 05:49
@Makyen... its fine I guess there was some miss communication — jsLearner, Jul 14 '19 at 14:08

score 1 · Answer 1 · answered Jul 12 '19 at 15:46

1

Similar to this issue: IE and Edge fix for object-fit: cover;

Basically object-fit doesn't really work in Edge (despite being supported). Replace your .bg_video css with this:

.bg_video{
    position: absolute;
    top:50%;
    left:50%;
    width: 100%;
    height:auto;
    transform: translate(-50%, -50%);
}

answered Jul 12 '19 at 15:46

apoteet

742
5
21

Tried this, Seems to be better now thank you so much for the answer – jsLearner Jul 13 '19 at 06:00

score 0 · Answer 2 · answered Jul 12 '19 at 15:49

0

You can use the object-fit proprety :

.bg_video {
   object-fit : cover;
 }

answered Jul 12 '19 at 15:49

Abdelillah Aissani

3,058
2
10
25

Just need a little validation on how to fit a background video fit to screen with an overlay text

2 Answers2