Is there a way to make HTML5 video fullscreen

Question

Is there a way to play a video fullscreen using the HTML5  lt video gt  tag   And if this is not possible  does anybody know if there is a reason for this decision

User · Answer

No  it is not possible to have fullscreen video in html 5  If you want to know reasons  you re lucky because the argument battle for fullscreen is fought right now  See WHATWG mailing list and look for the word  video   I personally hope that they provide fullscreen API in HTML 5

User · Answer

This is supported in WebKit via webkitEnterFullscreen

User · Answer

You can do this if you tell to user to press F11 full screen for many browsers   and you put video on entire body of page

User · Answer

Firefox 3 6 has a full screen option for HTML5 video s  right-click on the video and select  full screen     The latest Webkit nightlies also support full screen HTML5 video  try the Sublime player with the latest nightly and hold Cmd   Ctrl while selecting the full screen option    I guess Chrome   Opera will also support something like this  Hopefully IE9 will also support full screen HTML5 video

User · Answer

it s simple  all the problems can be solved like this    1  have escape always take you out of fullscreen mode      this doesn t apply to manually entering fullscreen through f11   2  temporarily display a small banner saying fullscreen video mode is entered  by the browser   3  block fullscreen action by default  just like has been done for pop-ups and local database in html5 and location api and etc  etc   i don t see any problems with this design  anyone think i missed anything

User · Answer

A programmable way to do fullscreen is working now in both Firefox and Chrome  in their latest versions   The good news is that a spec has been draft here   http   dvcs w3 org hg fullscreen raw-file tip Overview html  You will still have to deal with vendor prefixes for now but all the implementation details are being tracked in the MDN site   https   developer mozilla org en DOM Using full-screen mode

User · Answer

Safari supports it through webkitEnterFullscreen   Chrome should support it since it s WebKit also  but errors out   Chris Blizzard of Firefox said they re coming out with their own version of fullscreen which will allow any element to go to fullscreen  e g  Canvas  Philip Jagenstedt of Opera says they ll support it in a later release   Yes  the HTML5 video spec says not to support fullscreen  but since users want it  and every browser is going to support it  the spec will change

User · Answer

The complete solution       function bindFullscreen video                  video  unbind  click   click toggleFullScreen              function toggleFullScreen                 if   document fullscreenElement  amp  amp        alternative standard method                      document mozFullScreenElement  amp  amp   document webkitFullscreenElement  amp  amp   document msFullscreenElement         current working methods                     if  document documentElement requestFullscreen                                document documentElement requestFullscreen                          else if  document documentElement msRequestFullscreen                                document documentElement msRequestFullscreen                          else if  document documentElement mozRequestFullScreen                                document documentElement mozRequestFullScreen                          else if  document documentElement webkitRequestFullscreen                                document documentElement webkitRequestFullscreen Element ALLOW KEYBOARD INPUT                                                    else                       if  document exitFullscreen                                document exitFullscreen                          else if  document msExitFullscreen                                document msExitFullscreen                          else if  document mozCancelFullScreen                                document mozCancelFullScreen                          else if  document webkitExitFullscreen                                document webkitExitFullscreen

User · Answer

Yes  Well what happens with HTML5 video is that you just put the  lt video gt  tag and the browser will give it s own UI  and thus the ability for full screen viewing  It really makes life much better on us users to not have to see the  art  some developer playing with Flash could make    It also adds consistency to the platform  which is nice

User · Answer

An alternative solution would be to have to browser simply provide this option on the contextual menu  No need to have Javascript to do this  though I could see when it would be useful   In the mean time an alternative solution would simply be to maximise the window  Javascript can provide screen dimensions  and then maximise the video within it  Give it a go and then simply see if the results are acceptable to your users

User · Answer

If none of these answers dont work  as they didnt for me   you can set up two videos   One for regular size and another for fullscreen size   When you want to switch to fullscreen    Use javascript to set the fullscreen video s  src  attribute to the smaller videos  src  attribute Set the video currentTime on the fullscreen video to be the same as the small video  Use css  display none  to hide the small video and display the big one with the via  position absolute  and  z-index 1000  or something really high

User · Answer

If you have option to define your site as progressive web app  PWA   then there is also option to use display   quot fullscreen quot  under manifest json  But this will only work if user adds installs your webapp to home screen and opens it up from there

User · Answer

2020 answer HTML 5 provides no way to make a video fullscreen  but the parallel Fullscreen API defines an API for elements to display themselves fullscreen  This can be applied to any element  including videos  Browser support is good  but Internet Explorer and Safari need prefixed versions  An external demo is provided as Stack Snippet sandboxing rules break it   lt div id  quot one quot  gt      One  lt  div gt    lt div id  quot two quot  gt      Two  lt  div gt    lt button gt one lt  button gt   lt button gt two lt  button gt    div       width  200px      height  200px     one   background  yellow     two   background  pink      addEventListener  quot click quot   event   gt        const btn   event target      if  btn tagName toLowerCase        quot button quot   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          2012 answer HTML 5 provides no way to make a video fullscreen  but the parallel Fullscreen specification supplies the requestFullScreen method which allows arbitrary elements  including  lt video gt  elements  to be made fullscreen  It has experimental support in a number of browsers   2009 answer Note  this has since been removed from the specification  From the HTML5 spec  at the time of writing  June  09    User agents should not provide a public API to cause videos to be shown full-screen  A script  combined with a carefully crafted video file  could trick the user into thinking a system-modal dialog had been shown  and prompt the user for a password  There is also the danger of  quot mere quot  annoyance  with pages launching full-screen videos when links are clicked or pages navigated  Instead  user-agent specific interface features may be provided to easily allow the user to obtain a full-screen playback mode   Browsers may provide a user interface  but shouldn t provide a programmable one

User · Answer

Most of the answers here are outdated   It s now possible to bring any element into fullscreen using the Fullscreen API  although it s still quite a mess because you can t just call div requestFullScreen   in all browsers  but have to use browser specific prefixed methods    I ve created a simple wrapper screenfull js that makes it easier to use the Fullscreen API   Current browser support is    Chrome 15  Firefox 10  Safari 5 1    Note that many mobile browsers don t seem to support a full screen option yet

User · Answer

Many modern web browsers have implemented a FullScreen API that allows you to give full screen focus to certain HTML elements  This is really great for displaying interactive media like videos in a fully immersive environment   To get the full screen button working you need to set up another event listener that will call the requestFullScreen   function when the button is clicked  To ensure that this will work across all supported browsers you are also going to need to check to see if the requestFullScreen   is available and fallback to the vendor prefixed versions  mozRequestFullScreen and webkitRequestFullscreen  if it is not   var elem   document getElementById  myvideo    if  elem requestFullscreen      elem requestFullscreen      else if  elem msRequestFullscreen      elem msRequestFullscreen      else if  elem mozRequestFullScreen      elem mozRequestFullScreen      else if  elem webkitRequestFullscreen      elem webkitRequestFullscreen        Reference - https   developer mozilla org en-US docs Web Guide API DOM Using full screen mode Reference - http   blog teamtreehouse com building-custom-controls-for-html5-videos

User · Answer

webkitEnterFullScreen      This needs to be called on the video tag ele  ment  for example  to full  screen the first video tag on the page use   document getElementsByTagName  video   0  webkitEnterFullscreen      Notice  this is outdated answer and no longer relevant

User · Answer

I think that if we want to have a open way to view videos in our browsers without any closed source plugins  and all the security breaches that comes with the history of the flash plugin      The  tag has to find a way to activate full screen   We could handle it like flash does  to do fullscreen  it has to be activated by a left click with your mouse and nothing else  I mean it s not possible by ActionScript to launch fullscreen at the loading of a flash by example   I hope I ve been clear enough  After all  I m only a french IT student  not an english poet     See Ya

User · Answer

You can change the width and height to be 100   but it won t cover the browser chrome or the OS shell   Design decision is because HTML lives inside the browser window  Flash plugins aren t inside the window  so they can go full screen   This makes sense  otherwise you could make img tags that covered the shell  or make h1 tags so the whole screen was a letter

User · Answer

From CSS  video       position  fixed  right  0  bottom  0      min-width  100   min-height  100       width  auto  height  auto  z-index  -100      background  url polina jpg  no-repeat      background-size  cover

User · Answer

As of Chrome 11 0 686 0 dev channel Chrome now has fullscreen video

User · Answer

HTML 5 video does go fullscreen in the latest nightly build of Safari  though I m not sure how it is technically accomplished

[html] Is there a way to make HTML5 video fullscreen?

Examples related to html

Examples related to video

Examples related to html5-video

Examples related to fullscreen