This is not really an article but more of a note-to-self.

I was having an issue where I had embedded a video into a webpage through the HTML5 video element but it wouldn’t show the ‘fullscreen’ control in the browser’s video controls. The HTML was setup like the following:

<video controls>
    <source src="/assets/somevideo.mp4" type="video/mp4" />
</video>

This all worked perfectly in FireFox where it would show the ‘fullscreen’ control and allowed me to watch the video in fullscreen.

In Edge and Chrome however the fullscreen control would appear greyed out.

In the end this was because the server was sending along a ‘security-policy’ HTTP header which contained the following values: ‘geolocation=(), microphone=(), camera=(), usb=(), fullscreen=()’ The option ‘fullscreen=()’ is a hint which indicates to the browser that fullscreen is not allowed and Edge and Chrome respected this.

After having removed the ‘fullscreen=()’ option from the HTTP header in the server configuration the video player in Edge and Chrome showed the ‘fullscreen’ control normally.