The Chrome 55 Video Download Button and How to Remove it

Since Chrome 55 is out, it now shows a download button for HTML 5 video and audio tags in the control bar:


This is a big issue for a surprising amount of users of my free responsive Website Designer RocketCake. I got a ton of support mails, asking me for a way to disable this. Understandable, making it extremely easy for an average person to download a video reduces the amount of people visiting your site for that video.

Here is a way to disable the download button on your page: Insert this CSS code into the style section of your header, or in RocketCake, use "View -> HTML Code of the Page -> Additional CSS Styles" and paste it there:

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


How does this work? The Chrome devs haven't provided an official way to disable or the button, unfortunately. It's HTML internally, but you cannot access the individual buttons using CSS. But, since the button is the last one of the control bar, you can make the control bar shorter, hiding that button. Not nice, not future prove, but it works for now.

I hope the Chrome developers will introduce a feature for removing this again. The bug tracker issue can be found here, if you like to add a comment.

No comments yet:


Name:  
Remember personal info?
yes
no
Email (optional):
URL (optional):
Enter "layered" (antispam):
Comment:Emoticons / Textile

  ( Register your username / Log in )

Notify: Yes, send me email when someone replies.  

Small print: All html tags except <b> and <i> will be removed from your comment. You can make links by just typing the url or mail-address.
Note: If you type in your email adress above, it will be visible to other visitors, although it will be hidden for bots using javaScript.