Bootstrap ставит отзывчивый текст и кнопки на видео

Question

Привет всем, у меня небольшая проблема. Я создаю сайт начальной загрузки, но я не могу поместить текст и кнопки поверх видео. Есть ли способ сделать это так, чтобы кнопка и текст все еще реагировали? Это то, что я до сих пор:

<?php include('header.php');?>
<div class="container-fluid videoContainer">
    <div class="row">
                     <video preload="auto" autoplay="true" loop="true">
                 <source src="StockTemplates/4thofJuly/4thofJuly_HD.mp4" type="video/mp4">
              </video>
          <h2 class="videoHeader">Prefessional-Quality Videos. Rendered Fast!</h2>
          <p class="videoParagaraph">Start with one of over 70 templates and create the perfect video to advertise your product or service</p>
          <a class="btn btn-primary videoButtonLeft" href="#" role="button">See Templates</a>
          <a class="btn btn-primary videoButtonRight" href="#" role="button">Make A Video</a>
</div>
</div>

В идеале мне бы хотелось, чтобы это выглядело примерно так: Это макет изображения

Answer 1

css

  .overlay{position: absolute;
            display: flex;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            color: white;
            text-align: center;
           }
            .overlay .videoButtonWrapper{
                flex-direction: row;
                margin-bottom: 10px;
            }
            .videoBackgroundWrapper{position: relative; width: 100%;}
            .videoBackground{width: 100%;}
              .tooltip:hover .tooltiptext {
                  visibility: visible;
              }

Вот HTML-код, который я использовал, используя display flex. Посмотрите, это работает действительно хорошие парни. Спасибо за вашу помощь

            <div class="videoBackgroundWrapper">
                     <video preload="auto" autoplay="true" loop="true" class="videoBackground">
                 <source src="Balloon.mp4" type="video/mp4">
              </video>
                        <div class="overlay">
             <h2>Professional Quality Videos Rendered Fast!</h2>
             <p>Start with one of over 70 customizable templates amd create the perfect video to advertise your product or service.</p>
             <div class="videoButtonWrapper">
             <button class="btn btn-primary">See Templates</button>
             <button class="btn btn-primary">Make Video</button>
             </div>
        </div>
</div>

Answer 2

Я бы поместил видео в дополнительную оболочку и поместил бы содержимое поверх этой оболочки. Если вы хотите, вы можете поместить содержимое в контейнер.

<div class="videoContainer">
  <video preload="auto" autoplay="true" loop="true">
    <source src="StockTemplates/4thofJuly/4thofJuly_HD.mp4" type="video/mp4">
  </video>
  <div class="container">
    <div class="position-absolute-wrapper" style="left: 15px; position: absolute; top: 50%; right:15px; transform: translate(0,-50%);">
      <h2 class="videoHeader">Prefessional-Quality Videos. Rendered Fast!</h2>
      <p class="videoParagaraph">Start with one of over 70 templates and create the perfect video to advertise your product or service</p>
      <a class="btn btn-primary videoButtonLeft" href="#" role="button">See Templates</a>
      <a class="btn btn-primary videoButtonRight" href="#" role="button">Make A Video</a>
    </div>
  </div>
</div>