Что вызывает этот глюк видео html5? - PullRequest
Новая
       7

Что вызывает этот глюк видео html5?

0 голосов
/ 26 апреля 2018

У меня есть видео-тег html5 с div, на который наложен текстовый заголовок, и когда вы прокручиваете Chrome, текстовый div исчезает, когда он приближается к верхней или нижней части экрана. Иногда это приближается к верхней части экрана, иногда к нижней. Я думаю, это зависит от того, где видео на экране, когда оно обновляется.

Кто-нибудь знает, что вызывает это? Я думаю, что это довольно разметка.

кодовая ручка: https://codepen.io/sharpdesigner/pen/KRgQZZ

снимок экрана с вопросом: https://imgur.com/a/Hn8DWkP

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