Problem
In Chrome 55, I got this download button with video> tags, but not in Chrome 54:
How do I hide the download button in Chrome 5 so that no one can see it?
To embed this video on my website, I used the video> tag. So I’m looking for a code that will disable the download option.
My current code is as follows:
<video width="512" height="380" controls>
<source data-src="mov_bbb.ogg" type="video/mp4">
</video>
Asked by Muhammad Zeeshan
Solution #1
Since the last time this question was answered, Google has added a new functionality. As illustrated here, you can now add the controlList attribute:
<video width="512" height="380" controls controlsList="nodownload">
<source data-src="mov_bbb.ogg" type="video/mp4">
</video>
Here are all of the controllist attribute’s options:
Answered by Remo
Solution #2
This is the answer (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: @Remo has come up with a new solution.
<video width="512" height="380" controls controlsList="nodownload">
<source data-src="mov_bbb.ogg" type="video/mp4">
</video>
Answered by Muhammad Zeeshan
Solution #3
You may now utilize controlsList in Chrome58 to hide controls you don’t wish to see. Both the audio> and video> tags have this option.
If you wish to get rid of the download button from the controls, follow these steps:
<audio controls controlsList="nodownload">
Answered by Nithin Girish
Solution #4
When HTML5 Audio is utilized, this can obscure the download button in Chrome.
Answered by Alper Ebicoglu
Solution #5
Hey, I have a long-term solution that should work in any situation!
For normal webdevelopment
<script type="text/javascript">
$("video").each(function(){jQuery(this).append('controlsList="nodownload"')});
</script>
Preload is set to false in HTML5 videos.
$( document ).ready(function() {
$("video").each(function(){
$(this).attr('controlsList','nodownload');
$(this).load();
});
});
$ undevinded? –> Switch to debug mode!
<script type="text/javascript">
jQuery("video").each(function(){jQuery(this).append('controlsList="nodownload"')});
</script>
Preload is set to false in HTML5 videos.
jQuery( document ).ready(function() {
jQuery("video").each(function(){
jQuery(this).attr('controlsList','nodownload');
jQuery(this).load();
});
});
Please let me know if this information was useful to you.
Answered by Chris Kroon
Post is based on https://stackoverflow.com/questions/41115801/in-chrome-55-prevent-showing-download-button-for-html-5-video