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):

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

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 3

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 4

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 5

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...