In Chrome 55 prevent showing Download button for HTML 5 video

Question

I am getting this download button with  lt video gt  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  lt video gt  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    lt video width  512  height  380   controls gt       lt source data-src  mov bbb ogg  type  video mp4  gt   lt  video gt

User · Answer

As of Chrome58 you can now use controlsList to remove controls you don t want shown  This is available for both  lt audio gt  and  lt video gt  tags   If you want to remove the download button in the controls do this    lt audio controls controlsList  nodownload  gt

User · Answer

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

User · Answer

This can hide download button on Chrome when HTML5 Audio is used    x000D   x000D    aPlayer  gt  audio   width  100    x000D     Chrome 29     x000D   media screen and  -webkit-min-device-pixel-ratio 0  x000D    and  min-resolution  001dpcm    x000D          HIDE DOWNLOAD AUDIO BUTTON    x000D        aPlayer   x000D             overflow  hidden width  390px   x000D        x000D   x000D       aPlayer  gt  audio    x000D        width  420px   x000D        x000D    x000D   x000D     Chrome 22-28    x000D   media screen and -webkit-min-device-pixel-ratio 0    x000D       x000D         aPlayer   x000D             overflow  hidden width  390px   x000D            x000D   x000D       aPlayer  gt  audio   width  420px    x000D    x000D   lt div id  aPlayer  gt  x000D    lt audio autoplay  autoplay  controls  controls  gt  x000D     lt source src  http   www stephaniequinn com Music Commercial 20DEMO 20- 2012 mp3  type  audio mpeg    gt  x000D    lt  audio gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Hey I found a permanent solution that should work in every case   For normal webdevelopment   lt script type  text javascript  gt      video   each function   jQuery this  append  controlsList  nodownload         lt  script gt    HTML5 videos that has preload on false     document   ready function          video   each function          this  attr  controlsList   nodownload          this  load                  undevinded  --  Debug modus    lt script type  text javascript  gt   jQuery  video   each function   jQuery this  append  controlsList  nodownload         lt  script gt    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

User · Answer

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   lt video width  512  height  380  controls controlsList  nodownload  gt       lt source data-src  mov bbb ogg  type  video mp4  gt   lt  video gt

User · Answer

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

User · Answer

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

User · Answer

Google has added a new feature since the last answer was posted here  You can now add the controlList attribute as shown here    lt video width  512  height  380  controls controlsList  nodownload  gt       lt source data-src  mov bbb ogg  type  video mp4  gt   lt  video gt    You can find all options of the controllist attribute here   https   developers google com web updates 2017 03 chrome-58-media-updates controlslist

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

Examples related to html

Examples related to google-chrome

Examples related to html5-video