Add Text Above HTML5 Video

Text centered over video in html5

See snippet here:
DEMO

var $vid = $('video','#container');
var $msg = $('#custom-message'); 
$msg.css({
    top:$vid.offset().top + (($vid.height()/2) - ($msg.height()/2)),
    left:$vid.offset().left + (($vid.width()/2) - ($msg.width()/2))
});​

HTML + CSS: How do I put text above a video on a scrollable website?

You need to make the section of the first video relative. So add this to your CSS:

#one {
  position: relative;
}

Text over video html

Surely you are looking for more than this:

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

If you want to put the content on top of the video, you would use some kind of positioning:

.container { position:relative; }
.container video {
    position:relative;
    z-index:0;
}
.overlay {
    position:absolute;
    top:0;
    left:0;
    z-index:1;
}

link

H1 Text Above HTML5 Video

You want to use absolute positioning, and you can use top: 50%; left: 50%; transform: translate(-50%,-50%); to center it.

.homepage-video, .homepage-video video {  position: relative;}.homepage-video video {    background-size: cover !important;    background-repeat: no-repeat !important;    background-position: 50% !important;}
.text-over-video {  position: absolute;  top: 50%;  left: 50%;  transform: translate(-50%,-50%);  text-align: center;}

<div class="homepage-video">  <video autoplay loop muted>    <source src="https://player.vimeo.com/external/208845912.hd.mp4?s=2c04fe329c04029926a99943f076c84c6b86bb46&profile_id=119" type="video/mp4">  </video>  <div class="text-over-video">    <h1>HEADING TEXT GOES HERE</h1>  </div></div>

---

Related Topics