html - 类似airbnb的视频背景html/css

Question

我正在尝试制作视频背景作为 airbnb 网站，但我真的不知道如何让它发挥作用。我不确定他们是使用 jquery 还是我遗漏了什么。在 firefox 中看起来不错，但是当我在 chrome、Internet explorer、Edge 和 safari 中打开 html 时，视频不可见。这是html和css，我真的希望有人能帮助我。我希望视频具有相同的高度，我不希望它像在 airbnb 中一样响应式，但不知道怎么做!一个多星期以来，我一直在努力让它发挥作用，但一无所获:(我想做一些类似于 airbnb 但不一样的东西，这就是为什么我复制并粘贴 html 和 css 代码。任何帮助将不胜感激!谢谢!

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 1

请按如下方式更新您的 CSS:

.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;
}