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 condimentum mauris.</p>  				</article>  			</div>          		</div>        	</body>

is there way put content (etc. text, div...) on top of embed video using boostrap. can without boostrap.

there 2 steps:

start placing image , text in contain them both. modify 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 jsfiddle illustrating: http://jsfiddle.net/sx982/779/


Comments

Popular posts from this blog

neo4j - finding mutual friends in a cypher statement starting with three or more persons -

php - How to remove letter in front of the word laravel -

minify - Minimizing css files -