Наложение текста на элемент видео - PullRequest
Новая
       9

Наложение текста на элемент видео

0 голосов
/ 06 сентября 2018

У меня есть полноэкранный div, который настроен на воспроизведение видео, но требует, чтобы я поместил немного HTML поверх него. Однако всякий раз, когда я размещаю это, я вижу, как тестовая кнопка загружается, а затем исчезает при загрузке видео.

Что я делаю не так?

Отрывок: 

<div class="row black-bg">
<section class="Splash">
    <div class="video-container">
          <video autoplay muted loop="true">
            <source type="video/mp4" src="/backdropvideo.mp4">
          </video>
    </div>
    <div class="row mt-5" style="z-index:22222;"><button> test </button></div>
</section>

CSS: 

.Splash {
    position: relative;
    width: 90vw;
    margin: 0 auto;
    height: 95vh;
    min-height: 710px;
    background: #000;
    overflow: hidden;
    background:black;
}

.video-container {
  position: relative;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%; 
  overflow: hidden;
}
.gamesplayed {
    background-image: url(assets/GamesBanner.png);
    background-color: black;
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    width:100%;
    min-height:20vh;
}

.video-container video {
  /* Make video to at least 100% wide and tall */
  min-width: 100%; 
  min-height: 100%; 

  /* Setting width & height to auto prevents the browser from stretching or squishing the video */
  width: auto;
  height: auto;

  /* Center the video */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

1 Ответ

0 голосов
/ 07 сентября 2018

Если я удаляю z-index из встроенного стиля на кнопке теста и создаю правило стиля для mt-5 (я выбрал это, поскольку оно не было определено в примере, вы можете добавить стили в качестве другого класса, еслинеобходимо) следующим образом, тогда кнопка остается видимой поверх видео: 

.mt-5 {
    position: absolute;
    top: 5px;
    z-index: 10;
}

, очевидно, в зависимости от z-индекса других элементов на странице, вам может потребоваться настроить это, но ключ добавлял position и top атрибуты

...