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

视频背景html / css像airbnb

1 个答案: