0

Does anyone know how to restrict the HTML5 Video fullsize limit to the portion of the screen instead of the complete screen.

Example: My screen size is 1920 * 1080 where my whole page will be displayed and on top of the page I've a modal dialog with 920 * 800 where I will display the list of videos, when I click on fullscreen of any video it is occupying my whole screen size 1920 * 1080, instead of it I want it to occupy only 920 * 800, which is my modal dialog size. Any thoughts. Any help would be highly appreciated.

Ajay Srikanth
  • 1,095
  • 4
  • 22
  • 43

1 Answers1

0

You can fullscreen an outer element that contains the tag, instead of making the itself full screen, by using requestFullscreen on the outer element from JavaScript:

https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Using_full_screen_mode

Unfortunately, if you enable controls on the video element, it will still have its own fullscreen button too. There might be ways to hide it; here's another question about that topic:

How to hide full screen button of the video tag in HTML5

but it doesn't seem to be possible in all browsers. The best thing is probably to hide all of the video's controls, and implement your own controls (there's open source out there that does this kind of thing, like video.js).

Community
  • 1
  • 1
aldel
  • 6,489
  • 1
  • 27
  • 32