Question

我有一个带有文字标题重叠的div的html5视频标记，当您在chrome中滚动时，文本div会在屏幕折叠的顶部或底部附近消失。有时它接近屏幕的顶部，有时是底部。我认为这取决于视频在刷新时的位置。

有谁知道造成这种情况的原因是什么？我认为这是非常准确的标记。

codepen：https://codepen.io/sharpdesigner/pen/KRgQZZ

HTML

<section id="video-landing" class="hide-mobile">
                    <div class="container">
                      <div class="row">
                        <div class="col-md-6 video-caption">
                            <h1>Lorem ipsum dolor sit</h1>
                            <p class="big">Quisque varius erat et</p>
                            <p>Vivamus aliquam lectus est. Nulla vitae fringilla felis. Aenean id elit sit amet sem mattis bibendum eu a felis. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>

                        </div>

                      </div>
                    </div> <!-- /container -->

                    <video muted autoplay="autoplay" loop="loop" id="bgvid">
                            <source src="http://www.mysportresume.com/phone.mp4" type="video/mp4" /> 
                    </video>

                </section><!-- #section -->

CSS

body {
  height: 2000px;
  margin-top: 500px;
}
.container {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}
section#video-landing, section#video-landing-mobile {
    background: url('../images/video-bg.jpg') no-repeat 0 -175px;
    background-size: cover;
}
section#video-landing .row, section#video-landing-mobile .row {
    margin: 0;
    position: relative;
}
.video-caption {
    position: absolute;
    max-width: 550px;
    top: 165px;
    top: 8.5vw;
    left: 0;
    z-index: 99;
}
.video-caption h1, .video-caption p {
    color: #000;
    text-align: left;
}
.video-caption h1 {
    font-size: 53px;
    font-weight: 600;
}
.video-caption p.big {
    margin: 0 0 30px;
    max-width: 400px;
}
.video-caption p {
    font-size: 17px;
}
p.big {
    color: #000;
    font-size: 27px !important;
    font-weight: 300;
    line-height: 1.5;
    max-width: 850px;
    margin: 0 auto;
}
video {
  padding-top: 50%;
  position: absolute;
  top: 50%;
  left: 0;
  -webkit-transform: translateY(-50%);
          transform: translateY(-55%);
  width: 100%;
}
#video-landing, #video-landing-mobile {
  width: 100%;
  padding-bottom: 30%;
  position: relative;
  overflow: hidden;
  color: white;
}
#video-landing .container, #video-landing-mobile .container {
    max-width: 1140px;
}
#video-landing video, #video-landing-mobile video {
  position: absolute;
  top: 0; bottom: 0; left: 0; right: 0;
}

造成这个html5视频故障的原因是什么？

0 个答案: