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

97258

December 30, 2016, at 3:54 PM

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>

Answer 1

This is the solution

 //From this post  http://stackoverflow.com/questions/39602852/disable-download-button-for-google-chrome/40975859#40975859

   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 */
   }

Answer 2

Chrome should provide web developers with an API way of enabling / disabling this feature. This was requested here: https://bugs.chromium.org/p/chromium/issues/detail?id=675596&can=2&q=media%20download&colspec=ID%20Pri%20M%20Stars%20ReleaseBlock%20Component%20Status%20Owner%20Summary%20OS%20Modified

Answer 3

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>

Click here to see the screenshot

POPULAR ONLINE

Pygame Image loading is a pain

jquery adding variables and making script short

How do I check if the user is authenticated with the database using PyMongo?

Cordova app doesn't work on Android 4.2

Add a body class for specific selected shipping option in Woocommerce checkout

how to create a drag and drop form generator? [on hold]

I am an OJT Student and still a beginner in programmingI was ask to create a "Form Generator"

776

CSS

How can I make a single column table flow to the right in html/css?

I have a single column table that dynamically adds and removes valuesBecause the size of the screen we are displaying it on is not tall, I wanted the rows to move to the right

570

CSS

alert(); not working with jquery and bootstrap

alert function is not working with rest of the code (working using bootstrap,jquery,js) ,it works if i remove everything else below it

796

CSS

How Would I Make a Custom Scrollbar Apply Only to a Specific DIV Tag

Basically, I'm trying to setup a thinner scroll-bar for a Tumblr blog I need to doHow do I specify which div the scrollbar should effect, because I don't want the custom scrollbar (for the div) to replace the web-browser's default scrollbar (the scrollbar...

607