Disable download button for Google Chrome?

Question

Google Chrome is now shipping with a download button for videos that are just embedded videos (i.e. not MSE):

I'm having a hard time find any documentation for Chrome's implementation of the <video> tag. Does anyone know if there is a way - short of disabling "controls" and creating your own video player controls - of disabling this feature?

I realize that if this is showing, it's already easy to download the video, I just want to disable that functionality from appearing as part of the controls.

Thank you!

Answer 1

or you can simply add nodownload in controlsList

<video width="512" height="380" controls controlsList="nodownload">
    <source data-src="mov_bbb.ogg" type="video/mp4">
</video>

Answer 2

You can inspect the controls of the native Chrome Video Player by activating the shadow DOM in Settings|Preferences -> Elements -> Show user agent shadow DOM

After that you can inspect the players buttons.

Now the problem is that the download button cannot be accessed via CSS for some reason.

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

won't work. Even selecting the preceding button and targeting its neighbor using + or ~ won't work.

The only way we found yet was nudging the button out of the viewable area by giving the control panel a greater width and making the enclosure overflow: hidden

video::-webkit-media-controls {
    overflow: hidden !important
}
video::-webkit-media-controls-enclosure {
    width: calc(100% + 32px);
    margin-left: auto;
}

I hope google will fix this issue soon because most content providers won't be happy with this...

Answer 3

Demmongonis solution does work but be aware it can lead to unwanted results.

Android/Chrome sometimes, depends in the video I guess and other factors, adds buttons at the right of the download-button. i.e. the casting-button (there is no way to select it). It will make the download-button to remain visible and the last button to get hidden (casting-button)

Update

It is posible now to hide the download button using the controlsList attribute:

<video controlsList="nodownload" ... />

Answer 4

Yes, this is possible now, at least at the time of writing, you can use the controlsList attribute:

<video controls controlsList="nodownload">
  <source data-src="movie.mp4">
</video>

It seems this was introduced in Chrome 58, and the documentation for it is found here: https://developers.google.com/web/updates/2017/03/chrome-58-media-updates#controlslist

Developers can now customize media controls such as the download, fullscreen and remoteplayback buttons. Usage in HTML:

<video controls controlsList="nofullscreen nodownload noremote foobar"></video>

There is even an official sample page: https://googlechrome.github.io/samples/media/controlslist.html

Answer 5

One more control item I was trying to disable, additionally to 'download' - is 'picture-in-picture'.

Sadly there`s no property, for that purpose to be added in the controlsList. But there is an attribute - disablePictureInPicture you can add to the Element to disable pip.

Example disabling both download and picture-in-picture:

<video disablepictureinpicture controlslist="nodownload">...</video>

Details: https://wicg.github.io/picture-in-picture/#disable-pip

Answer 6

Hey I found a permanent solution that should work in every case!

For normal webdevelopment

<script type="text/javascript"> 
$("video").each(function(){jQuery(this).append('controlsList="nodownload"')}); 
</script>

HTML5 videos that has preload on false

$( document ).ready(function() {
  $("video").each(function(){
    $(this).attr('controlsList','nodownload');
    $(this).load();
  });
});

$ undevinded? --> Debug modus!

<script type="text/javascript"> 
jQuery("video").each(function(){jQuery(this).append('controlsList="nodownload"')}); 
</script>

HTML5 videos that has preload on false

jQuery( document ).ready(function() {
  jQuery("video").each(function(){
    jQuery(this).attr('controlsList','nodownload');
    jQuery(this).load();
  });
});

Let me know if it helped you out!

Answer 7

To keep it simple.. You need to add an attribute called controlslist (LOWERCASE, directly after controls) and you need to set its value to ="nodownload". Also, make sure your src file(type) and your attribute type's value match, unlike some of the above examples; my link is to a file named 'sunrise over water.mp4' on my Google Drive. How I do it looks like this:

<video src="https://drive.google.com/open?id=0B1CDu1eNPJqDVEQxMzZUV1dURjg" title="sunrise over water" width="420" height="300" controls controlslist="nodownload" type="video/mp4"> Video Not Supported By Your Browser... </video>

OR

<video width="440" height="320" title="sunrise over water" controls controlslist="nodownload"> <source src="https://drive.google.com/open?id=0B1CDu1eNPJqDVEQxMzZUV1dURjg" type="video/mp4"> Video Could Not Be Played In Your Browser... Sorry. </video>

Answer 8

In addition to above answers you have to add following code to disable context menu:

index.html: (globally)

<body oncontextmenu="return false;">

OR you can disable context menu for some element:

element.oncontextmenu = function (e) {
    e.preventDefault();
};

Answer 9

Plain javascript to disable the "download" Button from a video in your page:

<script>
    window.onload = function() {
        video = document.querySelector('video');
        if (video) {
           video.setAttribute("controlsList", "nodownload");
        }
    };
</script>

If you want to, you can also is querySelectorAll and remove each video. In my example I just have only one video per page.

Answer 10

The above answer offers a good solution. However, when I was working on this in my project, there were two problems with it.

1. Download occurs (as if the download button had been pressed) when right margin area of the fullscreen button is touched on Android (mobile or tablet). Applying z-index didn't fix it.

2. Because of overflow:hidden, the download button is invisible but still exists to the right of the fullscreen button. That means when you press "tab" several times after clicking any control button or bar on PC, you can still reach the download button.

Additionally, be careful -- some small-width devices (e.g. mobile phones) are small enough to hide the seek bar. It would need many more pixels to hide the download button.

I hope Google provides the option to adjust this ASAP.

Answer 11

I using following JavaScript snippet which is working very well:

document.querySelectorAll("video[id^=media-player]").forEach((elem) => elem.controlsList.add("nodownload"));

Example: www.ring-cafe-finsterwalde.de/archiv/archiv.html#archiv4