Question

.video {
	z-index: 0;
	position: relative;
}

.videoText {
	z-index: 1;
	position: absolute;
}

<body>
		
		<div class="videoContainer">
		
			<div class="video embed-responsive embed-responsive-16by9">
				<video src="" autoplay muted loop></video>
			</div>
			
			<div class="videoText">
				<article>
					<p>Nullam a condimentum mauris.</p>
				</article>
			</div>
      
		</div>
    
	</body>

有没有办法使用Boostrap将内容（等文本，div ...）放在嵌入视频的顶部。没有Boostrap，我可以做到这一点。

Answer 1

有两个步骤：

首先将图像和文本放在包含它们的内容中。然后修改CSS

＆＃13;

.VideoAndText {position: relative;} 
.VideoAndText .col {position: absolute; z-index: 1; top: 0; left: 0;}

＆＃13;

    <div class="VideoAndText">
    <div class="embed-responsive embed-responsive-16by9">
        <iframe width="250" height="250" src="https://www.youtube.com/embed/KBALcN701NU" frameborder="0" allowfullscreen></iframe>
    </div>
    <div class="col">
        <div class="col-sm-4">
            <p>Hello World</p>
        </div>
    </div>
</div>

＆＃13;

这里有一个jsFiddle，说明：http://jsfiddle.net/sX982/779/

使用bootstrap在视频顶部显示文本

1 个答案: