How to hide three-dots button of chrome video player in version 70+

Question

Before this version, the "-internal" pseudo-elements worked fine in CSS. But they deprecated them in the last version, so if I set in my CSS like this:

video::-internal-media-controls-overflow-button{
  display: none;
}

It works in the previous versions, but the shadow elements of native video player that should changed with that deprecation are still the same. Check this screenshot

The video's shadowroot is closed, so I can not access through JS to delete or hide.

I guess that they should switch those -internal pseudo-elements to -webkit, but currently I am not able to find other solution.

Any idea?

Answer 1

Hello this is the way I solve the issue, in my case I used blueimp-gallery for a video carousel were video tags are created dynamically by the library, I just added:

$('video').each(function (index) {
      $(this).attr("disablepictureinpicture", true);
});

But if you have static video tag just do this:

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

Original answer you may find it here.