我想知道如何做到这一点,因为我的尝试导致了这个
.fondoHeadHome { height: 400px;}
.fondoHeadHome>h1 { font-family: 'Lato', sans-serif; font-size: 35px; font-weight: bold; color: white; text-shadow: 0 0 1em black; padding-bottom: 0px; padding-top: 140px;}
.fondoHeadHome>p { font-family: 'Lato', sans-serif; font-size: 25px; color:white; text-shadow: 0 0 1em black; padding-top: 10px; }
.fondoHeadHome { /*background-image: url("banner-1920x400-1.jpg");*/ background-position: center; background-size: 1920px 400px;}
video {
position: absolute;
top: 50%;
left: 50%;
height: inherit;
z-index: -100;
transform: translateX(-50%) translateY(-50%);
transition: 1s opacity;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="fondoHeadHome row text-center">
<video preload="true" autoplay="autoplay" loop volume="0" poster="pic.jpg" class="fillWidth">
<source src="https://morning-shelf-6185.herokuapp.com/assets/2015-01-01-bokeh-6e0d97b003dff1c88b95db3126cd4788.mp4">
</video>
<h1>COMPRA Y VENDE, MÁS FACIL</h1>
<p>
Únete al marketplace de moda y crea tu propia tienda.<br>
¡Una comunidad de miles de fashionistas te espera!
</p>
</div>
</div>
我只能将它设置为“全屏”,但我希望它是 400px 高和 100% 长(容器大小)
有什么建议吗?
您必须在 Video 标签中包含 100% 的宽度,并将所有内容都包含在 div 中,宽度也为 100%,您想要的高度和溢出隐藏