Html5 Full screen video

Question

Is there any way to do this  I wan to play video in full screen  Without browser  setting width 100   height 100   keep browser visible yet

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

Add object-fit  cover to the style of video  lt video controls style  quot object-fit  cover  quot   gt

User · Answer

Here is a very simple way  3 lines of code  using the Fullscreen API and RequestFullscreen method that I used  which is compatible across all popular browsers    x000D   x000D  var elem   document getElementsByTagName  video   0   x000D  var fullscreen   elem webkitRequestFullscreen    elem mozRequestFullScreen    elem msRequestFullscreen  x000D  fullscreen call elem      bind the  this  from the video object and instantiate the correct fullscreen method  x000D   x000D   x000D    For browser compatibility   MDN  amp  Can I use

User · Answer

All hail HTML5       var videoElement   document getElementById  videoId        videoElement webkitRequestFullScreen

User · Answer

if  vi video 0  exitFullScreen  vi video 0  exitFullScreen        else if  vi video 0  webkitExitFullScreen  vi video 0  webkitExitFullScreen        else if  vi video 0  mozExitFullScreen  vi video 0  mozExitFullScreen        else if  vi video 0  oExitFullScreen  vi video 0  oExitFullScreen        else if  vi video 0  msExitFullScreen  vi video 0  msExitFullScreen        else   vi video parent   append vi video remove

User · Answer

You can use html5 video player which has full screen playback option  This is a very good html5 player to have a look   http   sublimevideo net

User · Answer

No  there is no way to do this yet  I wish they add a future like this in browsers   EDIT   Now there is a Full Screen API for the web You can requestFullscreen on an Video or Canvas element to ask user to give you permisions and make it full screen    Let s consider this  element    lt video controls id  myvideo  gt     lt source src  somevideo webm  gt  lt  source gt     lt source src  somevideo mp4  gt  lt  source gt   lt  video gt    We can put that video into fullscreen mode with script like this   var elem   document getElementById  myvideo    if  elem requestFullscreen      elem requestFullscreen      else if  elem mozRequestFullScreen      elem mozRequestFullScreen      else if  elem webkitRequestFullscreen      elem webkitRequestFullscreen      else if  elem msRequestFullscreen       elem msRequestFullscreen        Full documentation

User · Answer

You can do it with jQuery   I have my video and controls in their own  lt div gt  like this    lt div id  videoPlayer  style  width 520px  -webkit-border-radius 10px  height 420px  background-color white  position relative  float left  left 25px  top 55px   align  center  gt        lt video controls width  500  height  400  style  background-color black  margin-top 10px  -webkit-border-radius 10px   gt            lt source src  videos gin mp4  type  video mp4    gt       lt  video gt        lt script gt            video removeAttribute  controls           lt  script gt         lt div id  vidControls  style  position relative  width 100   height 50px  background-color white  -webkit-border-bottom-left-radius 10px  -webkit-border-bottom-right-radius 10px  padding-top 10px  padding-bottom 10px   gt             lt table width  100   height  100   border  0  gt                 lt tr gt                    lt td width  100   align  center  valign  middle  colspan  4  gt  lt input class  vidPos  type  range  value  0  step  0 1  style  width 500px     gt  lt  td gt                lt  tr gt                 lt tr gt                    lt td width  100   align  center  valign  middle  gt  lt a href  javascript    class  playVid  gt Play lt  a gt  lt  td gt                    lt td width  100   align  center  valign  middle  gt  lt a href  javascript    class  vol  gt Vol lt  a gt  lt  td gt                    lt td width  100   align  left  valign  middle  gt  lt p class  timer  gt  lt strong gt 0 00 lt  strong gt    0 00 lt  p gt  lt  td gt                    lt td width  100   align  center  valign  middle  gt  lt a href  javascript    class  fullScreen  gt Full lt  a gt  lt  td gt                 lt  tr gt                lt  table gt             lt  div gt          lt  div gt    And then my jQuery for the  fullscreen class is   var fullscreen   0       fullscreen   click function      if fullscreen    0       fullscreen   1         video   appendTo  body            vidControls   appendTo  body           video   css  position    absolute   css  width    100    css  height    90    css  margin   0  css  margin-top    5    css  top    0   css  left    0   css  float    left   css  z-index   600           vidControls   css  position    absolute   css  bottom    5    css  width    90    css  backgroundColor    rgba 150  150  150  0 5    css  float    none   css  left    5    css  z-index   700  css  -webkit-border-radius    10px       else                fullscreen   0              video   appendTo   videoPlayer                vidControls   appendTo   videoPlayer               change  lt video gt  css back to normal            change   vidControls  css back to normal               It needs a little cleaning up as I m still working on it but that should work for most browsers as far as I can see   Hope it helps

[html] Html5 Full screen video

Examples related to html