Add text above HTML5 Video

Question

Need Help on adding text on top of, so the text is overlaying an HTML 5 Video, And I also need to add a form inputs and buttons as well below is my HTML5 Video Code.

<video id="video" width="770" height="882" onclick="play();">
<source src="video/Motion.mp4" type="video/mp4" />
</video>

Matthew Darnell · Answer 1 · 2012-05-02T22:13:47.427

57

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

edited May 02 '12 at 22:13

answered May 02 '12 at 22:06

Matthew Darnell

4,538
2
19
29

1

Hello what I mean is text OVER the video or FLOATING above the video – jalf May 02 '12 at 22:07
Updated example to suit your needs. – Matthew Darnell May 02 '12 at 22:13
2

[Here's a working example](http://jsfiddle.net/robertc/NAeJD/), didn't have an MP4 capable browser to hand however – robertc May 02 '12 at 22:18
Thanks Robertc and Matthew.. It helps me a lot – jalf May 02 '12 at 22:24
This will overlay on whole page. Not a good solution though. But broad vision. thanks. – Jay Modi Mar 24 '15 at 12:36
The container is positioned relatively, so it will only fill the container, not the whole page. – Matthew Darnell Mar 24 '15 at 16:29

score 4 · Answer 2 · edited Mar 07 '23 at 03:41

You can use top and left position to be in percentage. as it will auto adjust top text when the window content size will change

<div class="container">
  <video id="video" width="770" height="882" onclick="play();">
    <source src="video/Motion.mp4" type="video/mp4" />
  </video>
  <div class="overlayText">
    <p id="topText">Content above your video</p>
  </div>
</div>

.overlayText {
  position: absolute;
  top: 30%;
  left: 20%;
  z-index: 1;
}

#topText {
  color: white;
  font-size: 20px;
  align-self: center;
}

Add text above HTML5 Video

2 Answers2

Linked

Related