user2112420 user2112420 - 4 months ago 29
HTML Question

Video background html/css like airbnb

I am trying to make a video background as airbnb website, but I really can not figure it out how to make it works.
I am not sure is they use jquery or if I am missing something. In firefox looks pretty good but when I open the html in chrome, Internet explorer, Edge and safari the video is not visible.
This is the html and css, I really hope someone can help me.
I want the video will be with the same height, I dont want it to make it responsive, just like in the airbnb, but dont know how! More than a week I am trying to make it work and nothing :(
I want to make something similar to airbnb but not the same, thats why I copy and paste the html and css code.
Any help will be appreciated!
Thanks!

HTML

<div class="hero shift-with-hiw js-hero">
<div class="hero__background">
<video autoplay="autoplay" preload="auto" loop="loop" poster="http://dummyimage.com/320x240/ffffff/fff" class="video-playing" id="home-video">
<source src="https://a0.muscache.com/airbnb/static/P1-background-vid-compressed-2.mp4" type="video/mp4"></source>
<source src="https://a0.muscache.com/airbnb/static/P1-background-vid-compressed-2.webm" type="video/webm"></source> </video>
</div>
<div class="hero__content page-container page-container-full text-center">
<div class="va-container va-container-v va-container-h">
<div class="va-middle">
<div class="raise-30">
<h2 class="text-branding text-jumbo text-contrast hero__heading">Live There</h2>
</div>
</div>
</div>
</div>
</div>


CSS

.hero {
height: 400px;
position: relative;
}

.hero {
height: 600px;
}

.hero__background {
bottom: 0;
left: 0;
overflow: hidden;
position: absolute;
right: 0;
top: 0;
}

audio, canvas, video {
display: inline-block;
}

.hero__background video {
height: 100%;
position: absolute;
top: 0;
width: auto;
}

.hero__background video {
height: auto;
width: 100%;
}

.page-container-full::after {
clear: both;
}

.page-container-full::after {
clear: both;
}

.text-center {
text-align: center;
}

.page-container, .page-container-responsive {
margin-left: auto;
margin-right: auto;
padding-left: 24px;
padding-right: 24px;
}

.page-container-full {
width: auto;
}

.hero__content {
height: 400px;
position: relative;
z-index: 2;
}

.hero__content {
height: 550px;
padding-bottom: 104px;
top: 50px;
}

.va-container-h {
width: 100%;
}
.va-container-v {
height: 100%;
}
.va-container {
display: table;
position: relative;
}

.va-middle {
vertical-align: middle;
}
.va-top, .va-middle, .va-bottom {
display: table-cell;
}

.text-contrast {
color: #fff;
}
.text-branding {
text-transform: uppercase;
}
.text-jumbo {
font-size: 60px;
font-weight: 700;
}

Answer

Please update your CSS as follows:

.hero {
    width: 100%;
    height: 600px;
    position: relative;
}

.hero__background {
    width: 100%;
    bottom: 0;
    left: 0;
    overflow: hidden;
    position: absolute;
    right: 0;
    top: 0;
}

.hero__background video {    
    position: relative;
    width: auto;
    min-width: 100%;
    height: auto;
}
Comments