How to add Label above Video in HTML5 ?

Last Updated : 28 Mar, 2024

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

Using the figure and figcaption Elements
Using label Tag

Using the figure and figcaption Elements

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.geeksforgeeks.org/wp-content/uploads/20240311140158/mem.mp4">
            Your browser does not support the video tag.
        </video>
        <figcaption class="video-label">
          GeeksforGeeks Video
          </figcaption>
    </figure>
</body>

</html>

Output:

Using label Tag

In this approach, we are using the <label> tag with the for attribute to associate it with the video element, creating a styled label above the video.

Syntax:

<label for="video">GeeksforGeeks Video</label>

Example: The below example uses a label tag to add the Label above the Video in HTML5.

HTML

<!DOCTYPE html>
<html>
  
<head>
    <title>Using label Tag</title>
    <style>
        .video-container {
            position: relative;
            width: 100%;
            max-width: 400px;
            margin: 0 auto;
        }

        video {
            width: 100%;
        }

        label {
            color: green;
            font-weight: bold;
            display: block;
            text-align: center;
            margin-bottom: 10px;
            font-size: 18px;
        }
    </style>
</head>

<body>
    <h1 style="text-align:center;">Using label Tag</h1>
    <div class="video-container">
        <label for="video">GeeksforGeeks Video</label>
        <video id="video" controls>
            <source type="video/mp4" src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240311140158/mem.mp4">
            Your browser does not support the video tag.
        </video>
    </div>
</body>

</html>