CODEWITHSUNDEEP
twitter-bootstrap
Viet
Viet

Reputation: 6953

text on top of video using bootstrap

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

Is there a way to put content (etc. text, div...) on top of an embed video using Boostrap. I can do that without Boostrap.

Upvotes: 0

Views: 981

Answers (1)

Max Pringle
Max Pringle

Reputation: 639

There are 2 steps:

Start by placing the image and the text in something that will contain them both. Then modify the CSS

.VideoAndText {position: relative;} 
.VideoAndText .col {position: absolute; z-index: 1; top: 0; left: 0;}
    <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>

Here's a jsFiddle illustrating: http://jsfiddle.net/sX982/779/

Upvotes: 2

Related Questions