Menu
My goal is to have text over each video element (there are many of them). The video is showing, but the div inside it does not.
<video autoplay playsinline style="transform: rotate(0deg); width: 100%; height: 100%; position: relative">
<div style="width: 100px; height: 30px; color: white; z-index: 1; position: absolute; top: 0px; left: 0px; background: green;">test</div>
</video>
In the element inspector, when I hover over the div, it does not show a box anywhere on the page. How to make it show up?
744
Video elements cannot contain elements inside, unless the video tag is not supported. This is common practice to display an error message explaining the browser doesn't support video .
Yes you can use a div inside a section . we use section when we want separate elements (this same category or similar). First tag inside section should be header (h). Example: one page in newspaper is a section, article is article and on a top this side we have header.
HTML allows playing video in the web browser by using <video> tag. To embed the video in the webpage, we use src element for mentioning the file address and width and height attributes are used to define its size. Example: In this example, we are using <video> tag to add video into the web page.
<video>: The Video Embed element. The <video> HTML element embeds a media player which supports video playback into the document. You can use <video> for audio content as well, but the <audio> element may provide a more appropriate user experience.
Video elements cannot contain elements inside, unless the video tag is not supported. This is common practice to display an error message explaining the browser doesn't support video.
Place your video inside an element (like a div) and add that div next to it, as a sibling to the video element and not a child. Use position to place it inside:
<div style="position: relative;">
<video autoplay playsinline style="transform: rotate(0deg); width: 100%; height: 100%; position: relative"></video>
<div style="width: 100px; height: 30px; color: white; z-index: 1; position: absolute; top: 0px; left: 0px; background: green;">test</div>
</div>Make sure you post your full code to ensure we can help you properly.
132
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
