How to use the figure and figcaption Elements In HTML

Using label Tag

In this approach, we are using the <figure> and <figcaption> elements to encapsulate the video, allowing us to position the label (<figcaption>) above the video (<video>) using absolute positioning.

Syntax:

  <figure>
        <video controls width="100%">
            <source type="video/mp4" src="YOUR _SOURCE'>
        </video>
        <figcaption>
         your caption
          </figcaption>
    </figure>

Example: The below example uses figure and figcaption Elements to add the Label above the Video in HTML5.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>figure and figcaption Elements</title>
    <style>
        .video-container {
            position: relative;
            bottom: -30px;
            width: 100%;
            max-width: 500px;
        }

        .video-label {
            position: absolute;
            top: -45px;
            left: 0;
            background-color: rgb(255, 0, 0);
            color: white;
            padding: 5px 10px;
            font-size: 20px;
        }

        h3 {
            margin-bottom: 10px;
        }
    </style>
</head>

<body>
    <h1>Using the figure and figcaption Elements</h1>
    <figure class="video-container">
        <video controls width="100%">
            <source type="video/mp4" src=
"https://media.w3wiki.org/wp-content/uploads/20240311140158/mem.mp4">
            Your browser does not support the video tag.
        </video>
        <figcaption class="video-label">
          w3wiki Video
          </figcaption>
    </figure>
</body>

</html>

Output:

How to add Label above Video in HTML5 ?

In HTML5, putting a label above a video is important for helping users understand and interact with the content better. There are two easy ways to do this: using the figure and figcaption elements, or just the label tag itself. By using these methods, you can easily add informative labels above your videos, making them more accessible and improving the overall user experience on your web page.

These are the following approaches to add Label above the video:

Table of Content