The Chrome 55 Video Download Button and How to Remove it
Posted on:March 03 2017
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.
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.
Add comment:
|
|
Possible Codes
| Feature | Code |
| Link | [url] www.example.com [/url] |
| Bold | [b]bold text[/b] |
| Quote | [quote]quoted text[/quote] |
| Code | [code]source code[/code] |
Emoticons
 |  |  |  |  |  |  |  |
 |  |  |  |  |