In Chrome 55, prevent showing Download button for HTML 5 video
HtmlGoogle ChromeHtml5 VideoHtml Problem Overview
I am getting this download button with <video>
tags in Chrome 55, but not on Chrome 54:
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>
Html Solutions
Solution 1 - Html
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
Solution 2 - Html
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>
Solution 3 - Html
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">
Solution 4 - Html
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>
Solution 5 - Html
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!
Solution 6 - Html
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.
Solution 7 - Html
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.
Solution 8 - Html
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.