Menu
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> 
399
CSS position property is used to set the position of text over an image. This can be done by enclosing the image and text in an HTML “div”. Then make the position of div “relative” and that of text “absolute”. The absolute elements are positioned relative to their parent (div).
Approach: Sometimes the user wants to display a specific image of his choice as the thumbnail of the video. This can be simply done by using the poster attribute. All you have to do is create a poster attribute in the video tag and place the URL of the thumbnail image in it.
How do you change text background color in HTML? You can change the background color of text in HTML by adding a background-color property to a paragraph (p) or heading (H1, H2, H3... ) element. Add this property either via inline CSS or on your website's CSS code.
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; } If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
