How to Hide Full Screen Button of the Video Tag in HTML5 ?

Last Updated : 08 Feb, 2024

The <video> element is used to embed video content on the web page. It allows the addition of video files in many formats such as MP4, WebM, etc. This element supports attributes like controls, autoplay, and loop to control video playback. It also enables the addition of captions and subtitles for accessibility.

Preview:

Output

Approach:

Create a structure of the project using <h1>, <h3>, and <video> and <source> elements.
The::-webkit-media-controls-fullscreen-button selector targets the full-screen button in WebKit-based browsers (like Chrome and Safari).
The Property display: none; hides the full-screen button.

Example: Illustration of hiding the full-screen button of the video tag in HTML5.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, 
                   initial-scale=1.0">
    <title>GFG</title>
    <style>
 
        /* Hide the full-screen button */
        video::-webkit-media-controls-fullscreen-button {
            display: none;
        }
    </style>
</head>
 
<body>
    <h2 style="color: green;">
        GeeksForGeeks
    </h2>
    <h3>
        How to hide full screen
          button of the video 
    </h3>
    <video id="myVideo" width="320"
           height="240" controls>
        <source src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190616234019/Canvas.move_.mp4"
                type="video/mp4">
    </video>
 
</body>
 
</html>