In Chrome 55, prevent showing Download button for HTML 5 video

The controlsList attribute to the rescue

Chrome 58 and above provides the controlsList attribute. It's a better way to tell our little troublesome Download button to go sit in the corner:

<!-- Meet controlsList. He's a bit of a control freak, but in a good way! -->
<video controls controlsList="nodownload">
  <source src="video.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>


In this script, the controlsList attribute is given a value of "nodownload", which natively drops our unwanted button.

Flexing your CSS muscle

With the CSS pseudo-elements ::-webkit-media-controls-*, you hold the power to tweak every tiny aspect of the media controls. Flex your CSS muscle and make your video player as unique as a snowflake!(🌨️).

Dynamic application using jQuery

For those who enjoy a little scripting, jQuery can add your controlsList attribute when the document is ready():

$(document).ready(function() {
    /* jQuery to videos: "You get a no-download control! You get a no-download control! Everyone gets a no-download control!" */
    $('video').attr('controlsList', 'nodownload');
});


This spot ensures consistency across all video elements on your website.

Caring for the less fortunate (browsers)

These solutions are beautiful, but what if poor IE or another less fortunate browser can't keep up? Always provide fallbacks or alternatives as a safety net 🎪.

UX before UI

Always remember, while preventing downloads might be necessary from a data protection perspective, enhancing the user's interaction with your content should also be a top priority.

‘Things to remember’-list

1. CSS and jQuery: Two powerful allies in your quest of hiding the download button.
2. Wide browser support: Owe it to controlsList.
3. UX over UI: Always cater to the best user experience, even over looks.
4. Copyright laws still apply: Use this power consciously.