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, 2022 in HTML by Tejashwini
• 3,820 points
3,221 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 Aug 8, 2022 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, 2022 in HTML by Tejashwini
• 3,820 points
415 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, 2022 in HTML by Tejashwini
• 3,820 points
493 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, 2022 in HTML by Ashwini
• 5,430 points
315 views
0 votes
0 answers

What is the correct way to declare an HTML5 Doctype.?

What is the correct way to use ...READ MORE

Aug 19, 2022 in HTML by Tejashwini
• 780 points
731 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, 2022 in PHP by Kichu
• 19,040 points
369 views
0 votes
0 answers

HTML5 Video Autoplay not working correctly

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

Jul 12, 2022 in HTML by Ashwini
• 5,430 points
1,163 views
0 votes
0 answers

Video is not supported in html5

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

Aug 3, 2022 in HTML by Ashwini
• 5,430 points
516 views
0 votes
0 answers

Css background video

Could someone please center the background of ...READ MORE

Aug 19, 2022 in CSS by Edureka
• 13,620 points
433 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,480 points
1,537 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, 2022 in HTML by Deepak
• 980 points
3,107 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP