无法在视频上对齐文本答案

【问题标题】：Cant align text over video无法在视频上对齐文本
【发布时间】：2021-09-20 21:39:39
【问题描述】：

我设计了一个着陆页，但它在移动设备上无法正常工作。

Image 1 Mobile : This is what my interface looks like currently on mobile.

Image 2 Desktop : This is what it looks like on desktop.

问题：我希望移动设备的外观与桌面设备相同。

我的代码如下：

body {
  position: relative;
  overflow: hidden;
  background-color:black;
  font-family: 'Chakra Petch', sans-serif;
  color: white;
}
 video {
  position: absolute;
  top: 0;
  width:100% !important;
  z-index: 1;/*  object-fit is not supported on IE  */
  object-fit: cover;
  opacity: 0.6;
}
 .container {
  z-index: 2;
  position: relative;
  padding-top: 200px;

}


.btn{
  background-color: #36454f !important;
  border-color: #36454f !important;
}

.btn:hover{
  background-color: #476376 !important;
}

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Anomaly Detection Portal</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
  
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@300&display=swap" rel="stylesheet">
  </head>
<body>
 
        <div class="row">
            <div class="col-md-12">
             
                  
                 <video autoplay muted loop>    
                  <source src="https://player.vimeo.com/external/368320203.sd.mp4?s=38b1bac5d627b94fb902597643461ee5f233d00a&amp;profile_id=139&amp;oauth2_token_id=57447761" type="video/mp4">                 </video>
                 
                 <div class="container">
                   <span style="font-size: 63px">Anomaly Detection Portal</span> 
                     <span>
                       <h4>
                          Use our state-of-the-art technology to find out anomalies in your traffic videos.

                       </h4>
                       <h5>
                        Our futuristic models give the maximum accuracy in more than 90% of the cases.
                       </h5>
                      </span>
                     <a class="btn btn-primary btn-md" href="login" role="button">Proceed Ahead.</a>
                 </div>
                   <!-- /.container -->
                 </div>
                 <!-- /.jumbotron -->
           
     
        </div>
    </div>
</body>

【问题讨论】：

您的 HTML 无效。先解决这个问题。
@Rob 如果您将其复制到您的编辑器中，则它是有效的。我不知道为什么这里会这样，但它是有效的。
我使用了the W3C validator，这很重要。
@Rob 实际上，它将在那里显示为无效，因为如您所见，我没有添加 HTML 标记。但是您实际上并不需要检查它，因为我的代码在内置编辑器中通过堆栈溢出完美执行。我需要一个解决文本位置的解决方案，而不是我的 HTML 可以正常工作。我以为您指的是不透明度级别，但不，我的代码不是无效的。

标签： html video html5-video text-alignment

【解决方案1】：

您可以使用字体缩放和动态填充来完成这项工作

我做了什么：

将字体大小更改为 vw（视口宽度）
将内边距更改为 10%（从最初的 200 像素）
也使用 vw 为字幕添加了字体大小

如果你不喜欢这个结果，你可以稍微调整一下值

不是 100% 相同，但非常接近

注意：您还可以使用混合方法使用 calc（vw 和 px 一起）以避免不可读的文本，如下面的链接中所述

更多关于视口here

body {
  position: relative;
  overflow: hidden;
  background-color:black;
  font-family: 'Chakra Petch', sans-serif;
  color: white;
}
 video {
  position: absolute;
  top: 0;
  width:100% !important;
  z-index: 1;/*  object-fit is not supported on IE  */
  object-fit: cover;
  opacity: 0.6;
}
 .container {
  z-index: 2;
  position: relative;
  padding-top: 10%;

}


.btn{
  background-color: #36454f !important;
  border-color: #36454f !important;
}

.btn:hover{
  background-color: #476376 !important;
}

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Anomaly Detection Portal</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
        <link rel="stylesheet" href="style.css">
        <link rel="preconnect" href="https://fonts.gstatic.com">
        <link href="https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@300&display=swap" rel="stylesheet">
      </head>
    <body>
     
            <div class="row">
                <div class="col-md-12">
                 
                      
                     <video autoplay muted loop>    
                      <source src="https://player.vimeo.com/external/368320203.sd.mp4?s=38b1bac5d627b94fb902597643461ee5f233d00a&amp;profile_id=139&amp;oauth2_token_id=57447761" type="video/mp4">                 </video>
                     
                     <div class="container">
                       <span style="font-size: 6vw">Anomaly Detection Portal</span> 
                         <span>
                           <h4 style="font-size: 2.5vw">
                              Use our state-of-the-art technology to find out anomalies in your traffic videos.
    
                           </h4>
                           <h5 style="font-size: 2vw">
                            Our futuristic models give the maximum accuracy in more than 90% of the cases.
                           </h5>
                          </span>
                         <a class="btn btn-primary btn-md" href="login" role="button">Proceed Ahead.</a>
                     </div>
                       <!-- /.container -->
                     </div>
                     <!-- /.jumbotron -->
               
         
            </div>
        </div>
    </body>
</html>

【讨论】：