HTML5 <video> Player Controls in Chrome Three Dots on the Right Open Blank Screen

Question

I am using a standard HTML5 <video> tag to embed a video into page:

<video controls>
    <source src="video/intro-video.mp4" type="video/mp4"/>
</video>

However, in Chrome's default controls on the right, three dots show up (options), however, when you click on them, it goes to a blank screen and there's no way to get out of it except for refreshing the entire page:

How do you make the options either go away or prevent a blank screen?

Answer 1

You can add "nodownload" and "noplaybackrate" in controlslist which will hide the download option from the video and add disablepictureinpicture inside the video tag which will hide the picture in picture option and by this way the three dots gets hidden:

<video width="100%" controls disablepictureinpicture controlslist="nodownload">
</video>

Working sample:

<video width="100%" controls disablepictureinpicture controlslist="nodownload noplaybackrate">
  <source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
</video>

Answer 2

if you disable the options, using the relevant exclusions from the list below, the dots should disappear:

<video controls controlsList="nofullscreen nodownload noremoteplayback noplaybackrate">
</video>

See ControlsList for more details