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>

理想情况下，我希望它看起来像这样：this is a mock up image

Answer 1

css

ID    Position
4     1           
5     2          
6     3

这是我使用display flex的html。查一下，它真的很不错。感谢您的所有帮助

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

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>

Bootstrap在视频上放置了自适应文本和按钮

2 个答案: