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
Post a Comment