I am trying to use different videos for my website using div tags and I also want to overlay text to display. but whenever I do stuffs and use another video as background in div then it displays only one video in full <html> not another.
My code is as follows.
<div class="video-overlay"></div>
<video class="sqs-html5-video" poster=".cdpn.io/15309/sp-poster.jpg" autoplay loop><source src="vid/1.mp4" type="video/mp4"><img src=".cdpn.io/15309/sp-poster-old-ie.jpg" class="ie8-poster"</video><div class="text-copy"><h1>Fullscreen Video w/overlay</h1></div>
Now if I put another background video then it will not display.. only 1st video es to display.
I am trying to use different videos for my website using div tags and I also want to overlay text to display. but whenever I do stuffs and use another video as background in div then it displays only one video in full <html> not another.
My code is as follows.
<div class="video-overlay"></div>
<video class="sqs-html5-video" poster="https://s3-us-west-2.amazonaws./s.cdpn.io/15309/sp-poster.jpg" autoplay loop><source src="vid/1.mp4" type="video/mp4"><img src="https://s3-us-west-2.amazonaws./s.cdpn.io/15309/sp-poster-old-ie.jpg" class="ie8-poster"</video><div class="text-copy"><h1>Fullscreen Video w/overlay</h1></div>
Now if I put another background video then it will not display.. only 1st video es to display.
Share Improve this question edited Nov 4, 2016 at 21:51 Mr Lister 46.6k15 gold badges113 silver badges155 bronze badges asked Oct 23, 2016 at 14:54 MaulikMaulik 3794 silver badges20 bronze badges2 Answers
Reset to default 3
.container { position:relative; }
.container video {
position:relative;
z-index:0;
}
.overlay {
position:absolute;
top:0;
left:0;
z-index:1;
}<div class="container">
<video id="video" width="770" height="882" onclick="play();">
<source src="video/Motion.mp4" type="video/mp4" />
</video>
<div class="overlay">
<p>Content above your video</p>
<form>
<p>Content Below Your Video</p>
<label for="input">Form Input Label</label>
<input id="input" name="input" value="" />
<button type="submit">Submit</button>
</form>
</div>
</div>or
<video loop autoplay muted poster="path/to/screenshot.jpg">
<source src="path/to/video.webm" type="video/webm">
<source src="path/to/video.ogg" type="video/ogg">
<source src="path/to/video.mp4" type="video/mp4">
</video>
You can simply use CSS for that.
.video-overlay{
position:absolute;
z-index:9999999999;
}<div class="video-overlay">Any Text</div>
<video class="sqs-html5-video" poster="https://s3-us-west-2.amazonaws./s.cdpn.io/15309/sp-poster.jpg" autoplay loop><source src="vid/1.mp4" type="video/mp4"><img src="https://s3-us-west-2.amazonaws./s.cdpn.io/15309/sp-poster-old-ie.jpg" class="ie8-poster"</video><div class="text-copy"><h1>Fullscreen Video w/overlay</h1></div>