CODEWITHSUNDEEP
htmlgoogle-chromevideohtml5-video
F L
F L

Reputation: 498

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

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:

enter image description here

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

Upvotes: 8

Views: 15852

Answers (6)

Yogesh
Yogesh

Reputation: 13

Note: "disablePictureInPicture" -it should be camelCase only, otherwise it won't work.

Upvotes: 0

go_cool_44
go_cool_44

Reputation: 401

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>

Upvotes: 24

Offbeatmammal
Offbeatmammal

Reputation: 8238

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

Upvotes: 4

triestobehelpful
triestobehelpful

Reputation: 1

To tag on to the other answers, and since it seems undocumented, "noplaybackrate" will hide the playback rate button if it's causing the overflow menu to appear.

Upvotes: 0

Alexej Kossmann
Alexej Kossmann

Reputation: 21

This problem appears to happen when one of the ancestor elements of the video element has the css style transform: translate(0,0) or transform: translate3d(0,0,0) applied. Removing it from this element solves the problem with the blank screen.

Upvotes: 2

F L
F L

Reputation: 498

Ok, got it! It appears that "Options" button behaves differently based on how video element was embedded in the page. Essentially, it offers, Download or "Picture-in-Picture" features or both, which, if the page is a wide scrollable site with dynamically generated content, caused a blank screen when clicked, which was my issue. Two ways I can solve that problem:

  1. Embed video in a separate fixed container (like a modal pop-up)

  2. Use a disablePictureInPicture attribute to eliminate the Picture-in-Picture feature altogether. https://wicg.github.io/picture-in-picture/#dom-htmlvideoelement-disablepictureinpicture

Upvotes: 0

Related Questions