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

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:

v

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=
                type="video/mp4">
    </video>
 
</body>
 
</html>

Output:

vdo1

Output




Reffered: https://www.geeksforgeeks.org


Geeks Premier League

Related
How to Change the Size of Audio Player in HTML 5 ? How to Change the Size of Audio Player in HTML 5 ?
Is HTML Considered a Programming Language ? Is HTML Considered a Programming Language ?
How to Style the Native File Upload Input Field ? How to Style the Native File Upload Input Field ?
Different Ways to Crate an Array of Objects in JavaScript ? Different Ways to Crate an Array of Objects in JavaScript ?
Design a Video Calling Website UI Template using HTML and CSS Design a Video Calling Website UI Template using HTML and CSS

Type:
Geek
Category:
Coding
Sub Category:
Tutorial
Uploaded by:
Admin
Views:
14