如何在没有水平滚动的情况下在引导程序中适应视频 100 宽度 100 高度答案

【问题标题】：How to fit video 100 width 100 height in bootstrap without horizontal scroll如何在没有水平滚动的情况下在引导程序中适应视频 100 宽度 100 高度
【发布时间】：2015-09-03 11:24:24
【问题描述】：

我想制作一个个人网站，但我的页面中放不下视频。除非我把 max-height:100% 我仍然可以水平滚动。或者我禁用了绝对位置，但标题无法显示在视频顶部。我用过

overflow-x: hidden

但它没有工作。将视频作为背景并仍然能够在其顶部放置文本的最佳方法是什么？

非常感谢！！

   video {
       position: absolute;
       z-index: -99;
       /*min-width: 100%;
       min-height: 100%;*/
       width: 100%;
       height: 100%;
       background: url(../img/header-bg.jpg) no-repeat 0 0;
       background-attachment: scroll;
       background-position: center center;
       background-repeat: none;
       background-size: 100% auto;
       -o-background-size: cover;
       -webkit-background-size: cover;
       -moz-background-size: cover;
   }

   header {
           text-align: center;
           color: #fff;
           height: 100vh;
           /*background-attachment: scroll;
           background-image: url(../img/header-bg.jpg);
           background-position: center center;
           background-repeat: none;
           -webkit-background-size: cover;
           -moz-background-size: cover;
           background-size: cover;
           -o-background-size: cover;*/
   }





<!-- Background Video -->
<video autoplay loop poster="data:image/gif,AAAA">
    <source src="./ocean.mp4" type="video/mp4">
    <source src="./ocean.ogv" type="video/ogv">
    <source src="./ocean.webm" type="video/webm">
</video>

   <!-- Header -->
   <header>
       <div class="container">
           <div class="intro-text">
               <div class="intro-lead-in">Welcome To Our Studio!</div>
               <div class="intro-heading">IT'S NICE TO MEET YOU</div>
               <a href="#services" class="page-scroll btn btn-xl">TELL ME MORE</a>
           </div>
       </div>
   </header>

【问题讨论】：

simulate background-size:cover on <video> or <img> 的可能重复项

标签： jquery html css twitter-bootstrap video

【解决方案1】：

使用 Bootstrap 的网格系统。

尝试添加：

<body>
    <div class="row">
        <div class="col-md-12 col-sm-12">
            <!-- Background Video -->
            <video autoplay loop poster="data:image/gif,AAAA">
                <source src="./ocean.mp4" type="video/mp4">
                <source src="./ocean.ogv" type="video/ogv">
                <source src="./ocean.webm" type="video/webm">
            </video>
        </div>
    </div>
</body>

【讨论】：

【解决方案2】：

了解您在此处拥有的有限代码以及您想要做什么，看看这是否可以帮助您入门。

我给标题部分添加了一些颜色背景以帮助查看该区域。如果您不需要该类，可以将其删除。

<!DOCTYPE html>
<html lang="en">
<body>

<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<style>
    

.header-block {
  margin-top: 2%;
  margin-bottom: 2%;  
}
.intro-header {
  font-family: 'Muli', sans-serif !important;
  font-weight: 300;
  font-style: italic;
  font-size: 74px;
  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
video {
  width: 100% !important;
  height: auto !important;
  z-index: -100; 
}
.video-holder {
  position: absolute;
  width: 100%;
  margin-bottom:100%;   
  top: 0;
  left: 0;
  opacity: 0.8;
  z-index: -100;  
}

.gradient-overlay {
  margin-top: 2%;  
  width: 100%;
  height: 25%;
  content: '';
  background: rgba(90,90,190,0.8);
  opacity: 0.8;
  z-index: 1;
}


</style>


<div class="container ">
  <div class="row-fluid">
  	<div class="video-holder">
  		<video autoplay loop muted>
            <source src="http://www.w3schools.com/tags/movie.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'/>
            <source src="./ocean.ogv" type="video/ogv">
            <source src="./ocean.webm" type="video/webm">	
  		</video>
  	</div>
  </div>
   <div class="container text-center gradient-overlay">
   		<div class="row">
   			<div class="col-xs-12 header-block">
   				<div class="intro-header">Welcome To Our Studio!</div>
                <div class="intro-heading"><h3>IT'S NICE TO MEET YOU</h3></div>
               <a href="#services" class="page-scroll btn btn-xl bg-primary">TELL ME MORE</a>
   			</div>
   		</div>
   </div>
</div>


<script type='text/javascript' src='//code.jquery.com/jquery-2.1.0.js'></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>

【讨论】：