Is there a way to make HTML5 video fullscreen

0 votes
Is it possible to use the HTML5 video> tag to play a video in fullscreen mode?

Does anyone know whether there is a reason for this choice, if this is not possible?
Aug 5 in HTML by Tejashwini
• 1,660 points
13 views

1 answer to this question.

0 votes

Although the Fullscreen API defines an API for items to display themselves in fullscreen, HTML 5 does not offer a mechanism to make a movie fullscreen.

Any element, including videos, can use this.

Although Internet Explorer and Safari require prefixed versions, browser support is generally good.

Because the Stack Snippet sandboxing restrictions prevent it, an external demo is offered.

<div id="one">
    One
</div>

<div id="two">
    Two
</div>

<button>one</button>
<button>two</button>
div {
    width: 200px;
    height: 200px;
}
#one { background: yellow; }
#two { background: pink; }

addEventListener("click", event => {
    const btn = event.target;
    if (btn.tagName.toLowerCase() !== "button") return;
    const id = btn.textContent;
    const div = document.getElementById(id);
    if (div.requestFullscreen) 
        div.requestFullscreen();
    else if (div.webkitRequestFullscreen) 
        div.webkitRequestFullscreen();
    else if (div.msRequestFullScreen) 
      div.msRequestFullScreen();
});
answered 6 days ago by Vikas

Related Questions In HTML

0 votes
0 answers

Is there a way to change the color of the placeholder text?

I tried to change the placeholder color ...READ MORE

Jul 4 in HTML by Tejashwini
• 1,660 points
9 views
0 votes
0 answers

how to create a HTML5 video element without it being shown in the page?

how is it possible to dynamically create ...READ MORE

Jul 5 in HTML by Tejashwini
• 1,660 points
13 views
0 votes
0 answers

How to run a function when a html5 video starts playing?

When a video begins to play, I ...READ MORE

Jul 21 in HTML by Ashwini
• 1,160 points
9 views
0 votes
0 answers

What's the right way to decode a string that has special HTML entities in it?

Let's say I submit a service request ...READ MORE

Jul 8 in HTML by Tejashwini
• 1,660 points
8 views
0 votes
0 answers

How to play video in new (blank) window?

I made this: http://imgur.com/Moc84HD.jpg in WordPress. What it does ...READ MORE

May 28 in PHP by Kichu
• 19,040 points
20 views
0 votes
0 answers

HTML5 Video Autoplay not working correctly

I want the video to automatically play, ...READ MORE

Jul 12 in HTML by Ashwini
• 1,160 points
12 views
0 votes
0 answers

Video is not supported in html5

I have the latest FF and I ...READ MORE

Aug 3 in HTML by Ashwini
• 1,160 points
9 views
0 votes
1 answer

How blockchain hides it's HTML source?

When you click View Source, you see ...READ MORE

answered Jul 17, 2018 in Blockchain by Shashank
• 10,400 points
517 views
0 votes
1 answer

How to Identify Web Element( Button) when there are multiple buttons without any ID

Hi Gangadhar, Do you need the HTML code to ...READ MORE

answered Feb 10, 2020 in HTML by Roshni
• 10,500 points
792 views
0 votes
1 answer

How to trigger a file download when clicking an HTML button or JavaScript?

For the button you can do <form method="get" ...READ MORE

answered Aug 4 in HTML by Deepak
• 760 points
15 views
webinar REGISTER FOR FREE WEBINAR X
Send OTP
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP