231

I am getting this download button with <video> tags in Chrome 55, but not on Chrome 54: enter image description here

How can I remove this so no one can see the download button in Chrome 55?

I have used <video> tag to embed this video on my web page. So, I want some kind of code to remove this download option.

Here is my current code:

<video width="512" height="380"  controls>
    <source data-src="mov_bbb.ogg" type="video/mp4">
</video>
5
  • @Makyen check this link if you are using chrome 55 you will see it w3schools.com/html/html5_video.asp Dec 13, 2016 at 7:53
  • @Makyen i have used video tag to embad this video on my web page so i want some kind of code to remove this download option. Dec 13, 2016 at 8:17
  • 1
    add the option controlsList="nodownload" to the video tag Jan 29, 2019 at 10:25
  • 1
    with bootstrap - <div class="embed-responsive embed-responsive-16by9"> <video class="embed-responsive-item" controls controlsList="nodownload" src="{{ video.video_url }}"> </video> </div>
    – Aseem
    May 19, 2020 at 19:04
  • Is it possible to modify the downloaded file name?How to set the download file extension for blob data
    – LF00
    Apr 7, 2022 at 6:03

8 Answers 8

421

Google has added a new feature since the last answer was posted here. You can now add the controlList attribute as shown here:

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

You can find all options of the controllist attribute here:

https://developers.google.com/web/updates/2017/03/chrome-58-media-updates#controlslist

9
  • 2
    The controlsList attribute will be available in Chrome 58. As of this comment, Chrome 58 has not yet been completely released.
    – KJ Price
    May 12, 2017 at 13:54
  • @KJPrice chrome 58 was released on the 19th of April, what do you mean be not completely released?
    – Remo
    May 12, 2017 at 15:17
  • Chrome updates rollout incrementally to browsers. One of my macs has version 58, the other mac still has version 57. By next week, both will probably be version 58. Yay the magic of evergreen!
    – KJ Price
    May 14, 2017 at 2:12
  • what about other browsers or older versions of chrome? Is there a way to implement this in all browsers?
    – Mark
    Jan 27, 2018 at 12:32
  • 1
    Is it possible to control the name of the downloaded file? I'm using a blob URL and the resulting file name is nonsensical.
    – riv
    Dec 13, 2018 at 16:06
201

This is the solution (from this post)

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

video::-webkit-media-controls-enclosure {
    overflow:hidden;
}

video::-webkit-media-controls-panel {
    width: calc(100% + 30px); /* Adjust as needed */
}

Update 2 : New Solution by @Remo

<video width="512" height="380" controls controlsList="nodownload">
    <source data-src="mov_bbb.ogg" type="video/mp4">
</video>
10
  • 1
    It may be a solution but looks like it may change more things than expected (i.e: in Safari). See "official" no-reply by Chrome: productforums.google.com/forum/#!topic/chrome/1WXSi6BzK9M (hopefully they will say something at some point...)
    – Ferran Gil
    Dec 16, 2016 at 9:14
  • 3
    I can confirm that replacing "video" with "audio" makes it work for just audio files as well
    – PandaWood
    Feb 3, 2017 at 23:29
  • 3
    The post to which you link says that the first rule is something they tried which did not work. Why not remove it from your answer?
    – David42
    Feb 12, 2017 at 12:58
  • 3
    This is a hack. Avoid. If they shuffle buttons around (or if the download button isn't there) this hack will hide the fullscreen button instead. Or it will hide half of it (because not all browser buttons are 30px)
    – fregante
    Sep 1, 2017 at 4:24
  • this solution broke the video player on Safari for me, check before you use it there.
    – Shota
    Sep 21, 2017 at 16:23
80

As of Chrome58 you can now use controlsList to remove controls you don't want shown. This is available for both <audio> and <video> tags.

If you want to remove the download button in the controls do this:

<audio controls controlsList="nodownload">
5
  • 2
    Users can right click on an audio file link to download the audio file anyway. And since hidden button and hidden URL seem synonymous, it would be useful if controlsList="nodownload" also hid audio source URLs. But the deterrent effect of this solution remains.
    – noobninja
    Jul 14, 2017 at 16:04
  • 2
    @noobninja - You are right, this solution does not prevent download, only removes download from the controls. Preventing download all together is a different topic. I believe there is are questions pertaining specifically to that, like this for instance. Jul 19, 2017 at 17:53
  • @noobninja How should chrome be able to hide the source URL of your media files if you pass them in as external sources? It's not the task of chrome to provide any kind of DRM. You can't hide the source of an audio file as you can't hide the source of an image file in an <img> tag. If you want protection of your content you will need some kind of custom solution and not a plain HTML5 audio element with a plain audio file served from the server.
    – trixn
    Jul 27, 2017 at 10:51
  • @trixn I am not interested in descrambling the source file. I am only interested in preventing the source file from being downloaded. Which I believe can be accomplished using JS/jQ. 1st, by replacing the status msg with a generic msg. 2nd, by allowing the source file to be played, while preventing it to be downloaded at the same time. Play, yes. Download, no.
    – noobninja
    Jul 28, 2017 at 4:38
  • 5
    @noobninja Allowing to be played means automatically allowing to be downloaded. Playing === Downloading. Since you are still using a plain html5 video element i could just switch off javascript in my browser and download it anyway as i know the source url. You can't prevent people effectively from downloading something just with client side code if you give them the path to it. I could just use wget (which does not even understand javascript) and download it. You will need some server side handling and probably a custom javascript based player to achieve this.
    – trixn
    Jul 28, 2017 at 6:18
14

This can hide download button on Chrome when HTML5 Audio is used.

 #aPlayer > audio { width: 100% }
/* Chrome 29+ */
@media screen and (-webkit-min-device-pixel-ratio:0)
  and (min-resolution:.001dpcm) {
     /* HIDE DOWNLOAD AUDIO BUTTON */
     #aPlayer {
           overflow: hidden;width: 390px; 
    }

    #aPlayer > audio { 
      width: 420px; 
    }
}

/* Chrome 22-28 */
@media screen and(-webkit-min-device-pixel-ratio:0) {
    
      #aPlayer {
           overflow: hidden;width: 390px; 
        }

    #aPlayer > audio { width: 420px; }
}
<div id="aPlayer">
 <audio autoplay="autoplay" controls="controls">
  <source src="http://www.stephaniequinn.com/Music/Commercial%20DEMO%20-%2012.mp3" type="audio/mpeg" />
 </audio>
</div>

Click here to see the screenshot

1
  • The question was for "video" and this is "audio". Close but really should make a strong point on this or better, just change it. Also, this answer requires the user to wrap the audio in a separate div or make an awkward workaround, why not just make it work for all audio and make it much simpler to use?
    – PandaWood
    Feb 3, 2017 at 23:30
7

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!

1
  • 1
    <script> window.onload = function() { video = document.querySelector('video'); if (video) { video.setAttribute("controlsList", "nodownload"); } }; </script> plain javascript Apr 25, 2019 at 18:35
3

As for current Chrome version (56) you can't remove it yet. Solution provided in other posts leads to overflowing some part of the video.

I've found another solution - you can make the preceding button to overlap the download button and simply cover it, by using this technique:

video::-webkit-media-controls-fullscreen-button {
   margin-right: -48px;
   z-index: 10;
   position: relative;
   background: #fafafa;
   background-image: url(https://image.flaticon.com/icons/svg/151/151926.svg);
   background-size: 35%;
   background-position: 50% 50%;
   background-repeat: no-repeat;
}

Example: https://jsfiddle.net/dk4q6hh2/

PS You might want to customise the icon, since it's for example only.

2
  • On my setup, your solution makes controls bar overlapping, and in current Chrome version (also 56), solution from first answer works flawlessly without video overlapping.
    – vzr
    Mar 8, 2017 at 14:42
  • Thanks for feedback. I've tested it in Chrome 56 on Windows, Mac and Android and it works fine. It may need a little tweaking for higher density screens, because on mobile button size is 48px and on desktop it's 32px.
    – pwkc
    Mar 8, 2017 at 16:30
0

May be the best way to utilize "download" button is to use JavaScript players, such as Videojs (http://docs.videojs.com/) or MediaElement.js (http://www.mediaelementjs.com/)

They do not have download button by default as a rule and moreover allow you to customize visible control buttons of the player.

-3

I solved the problem by covering the download button of a audio controller with a transparent div that changes the symbol of the mouse-cursor to "not-allowed".

The div blocks the activation of the download button.

Height: 50px, Width: 35px, Left: (document-right -60), Top: (same as the audio controller).

You must set the z-index style of the div above the z-index of the audio-controller.

See sapplic.com/jive66 for an example that works for chrome on win7 and on win8.

2
  • Why don't just make your div white so it will hide the download icon Apr 12, 2017 at 20:39
  • I chose the "not-allowed" mouse-cursor intentionally to indicate that downloading is not allowed. A simple white div should work equally. Apr 20, 2017 at 17:50

Not the answer you're looking for? Browse other questions tagged or ask your own question.