How to add Rounded Corners on Video in HTML ?

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>

Output:

vdo1 — Output

How to add Rounded Corners on Video in HTML ?

21mcsrltd

Improve

Article Tags :

Similar Reads

How to define the URL of the video file in HTML5?

In this article, we will learn how to define the URL of a video in HTML. The <video> tag is used to embed video files on a web page. This displays a video player along with the player controls depending on the browser. The source of the video can either be a singular one or it can be made to s

How to set the height and width of the video player in HTML5 ?

In this article, we will learn to set the width and height of the video player in HTML5. The following are the two scenarios The width and height of the video are fixed.Make the video respond to your screen width. Approach: The HTML5 width and height attributes of the video tag are used to set the h

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

How to Remove the Download Option from Audio Tag in HTML5 ?

The HTML5 <audio> tag is an easy way to add audio content to web pages. However, it comes with a download button that allows users to save the audio file. Sometimes, for various reasons, you might want to prevent users from downloading the audio file. To do so, you can disable the download opt

How to add Rounded Corners on Video in HTML ?

Adding Rounded Corners to a video involves modifying the video frame's corners to have a rounded appearance instead of sharp edges which gives the video a smoother, more refined appearance within a webpage's design. Below are the two ways to add round corners on Video in HTML: Table of Content Using

How to specify the URL of the media file in HTML5 ?

Here we will see how to set the URL of a media file using HTML. To set the URL of media file we use <source> tag. This tag is used to attach multimedia files like audio, video and pictures. The <audio>, <video> and <picture> elements contain the <source> element. Syntax

How to define the type of media resource in HTML5 ?

We can define or specify the type of media file (audio, video, etc) in HTML by the <source> tag. It defines the multimedia resources and gives the browser multiple and alternative types of that media file from which the browser can choose according to its compatibility with that media type. No

How to Hide Button Text in Phone Mode ?

While building a website for small-screen devices like smartphones, it becomes important that we use every bit of screen space wisely, we could not afford to waste any area. To achieve this, we can hide some peripheral elements in phone mode. Hiding button text in phone mode:Â Example: This example

How to Embed Video in Iframe in HTML?

You can use Iframe to show videos on your web page and embedding videos are very simple. To do so you can use the iframe tag directly in your HTML. Let's see how we can embed the video in the iframe. Embedding Videos in HTMLTo embed a video, use the iframe tag with the video's URL. Set the width, he

How to preload the video when the page loads in HTML5?

The HTML <preload> attribute is used to specify the way the developer thinks the video should be loaded when the page loads. Syntax<video preload=""> </video>There are 3 values for preload attribute auto, metadata and none. Note: An empty string leads to the default auto attribute