Click here to Skip to main content
14,330,776 members
Rate this:
Please Sign up or sign in to vote.
How can I disable/remove the download button on a video gallery player ?
Here my HTML & CSS code :

HTML :
<pre><div id="header">
<p id="poweredBy" class="right">Powered by <a href="https://www.google.com/">Google</a></p>
<p id="bigTitle">Recommended Videos</p>
</div>
<div id="list">
<div class="videoItem">
<p class="category">Category</p>
<a href="https://cdn.shopify.com/s/files/1/1872/1855/files/Paypal.mp4?2424" class="thumbnail"> <img src="https://cdn.shopify.com/s/files/1/1872/1855/files/hijab.jpg?2424" />
<div class="play"></div>
<span class="duration">05:00</span> </a>
<p class="title"><a href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam massa dui, ornare eu porttitor ut, tristique ac tellus.</a></p>
<p class="author"><a href="#">Author</a></p>
</div>
<div class="videoItem">
<p class="category promoted">Promoted</p>
<a href="https://cdn.shopify.com/s/files/1/1872/1855/files/Paypal.mp4?2424" class="thumbnail"> <img src="https://cdn.shopify.com/s/files/1/1872/1855/files/hijab.jpg?2424" />
<div class="play"></div>
<span class="duration">05:00</span> </a>
<p class="title"><a href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam massa dui, ornare eu porttitor ut, tristique ac tellus.</a></p>
<p class="author"><a href="#">Author</a></p>
</div>
<div class="videoItem">
<p class="category promoted">Promoted</p>
<a href="https://cdn.shopify.com/s/files/1/1872/1855/files/Paypal.mp4?2424" class="thumbnail"> <img src="https://cdn.shopify.com/s/files/1/1872/1855/files/hijab.jpg?2424" />
<div class="play"></div>
<span class="duration">05:00</span> </a>
<p class="title"><a href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam massa dui, ornare eu porttitor ut, tristique ac tellus.</a></p>
<p class="author"><a href="#">Author</a></p>
</div>
<div class="videoItem">
<p class="category promoted">Promoted</p>
<a href="https://cdn.shopify.com/s/files/1/1872/1855/files/Paypal.mp4?2424" class="thumbnail"> <img src="https://cdn.shopify.com/s/files/1/1872/1855/files/hijab.jpg?2424" />
<div class="play"></div>
<span class="duration">05:00</span> </a>
<p class="title"><a href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam massa dui, ornare eu porttitor ut, tristique ac tellus.</a></p>
<p class="author"><a href="#">Author</a></p>
</div>
<div class="videoItem">
<p class="category promoted">Promoted</p>
<a href="https://cdn.shopify.com/s/files/1/1872/1855/files/Paypal.mp4?2424" class="thumbnail"> <img src="https://cdn.shopify.com/s/files/1/1872/1855/files/hijab.jpg?2424" />
<div class="play"></div>
<span class="duration">05:00</span> </a>
<p class="title"><a href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam massa dui, ornare eu porttitor ut, tristique ac tellus.</a></p>
<p class="author"><a href="#">Author</a></p>
</div>
</div>



CSS :
/* 
Layout: Large Horizontal 
Thumbnail min-width: 260px
Thumbnail max-width: 400px
Layout Tresholds: 
    0 to 200px wide: 2 columns
    201 to 500px wide: 3 columns
    501 to 800px wide: 4 columns
    801px wide and more: 5 columns
*/

body {
  font:12px/16px Arial, Helvetica, sans-serif;
  color:#000;
  margin-left: 80px;
  min-width:578px; /* 300 (item's min-width) is 45% of 578 */ 
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

p { margin:0px 0; }
a { color:inherit;text-decoration:none; }
a:hover { text-decoration:underline; }
.right { float:right; }

#bigTitle {
  font-size:24px;
  margin:18px 0;
}
#poweredBy {
  font-size:11px;
}
#poweredBy a {
  color:#000;
}

.videoItem { 
  float:left;
  min-width:260px;
  max-width:400px;
  margin-bottom:20px;
}

@media screen and (max-width: 200px) { /* 400 (item's max-width) is 47% of 851 */
  .videoItem { width:48.5%; margin-right:3%; }
  .videoItem:nth-child(2) { margin-right:0; }
}
@media screen and (min-width: 201px) and (max-width: 500px) { /* 400 (item's max-width) is 30% of 1250 */
  .videoItem { width:32%; margin-right:2%; }
  .videoItem:nth-child(3) { margin-right:0; }
}
@media screen and (min-width: 501px) and (max-width: 800px) { /* 400 (item's max-width) is 23% of 1739 */
  .videoItem { width:24%; margin-right:1.3333%; }
  .videoItem:nth-child(4) { margin-right:0; }
}
@media screen and (min-width: 801px) { 
  .videoItem { width:19%; margin-right:1.25%; }
  .videoItem:nth-child(5) { margin-right:0; }
}
.videoItem:last-child {
  margin:0;
}
.thumbnail {
  position:relative;
  display:inline-block;
  width:100%;
  box-sizing:border-box;
  padding:0;
}
.thumbnail img {
  position:relative;
  display:block;
  width:100%;
  top:0;
  left:0;
}
.thumbnail:after {
  content:'';
  position:absolute;
  Z-index:1;
  width:100%; 
  height:100%;
  top:0; 
  left:0;
  background:rgba(0,0,0,0.25);
  transition: all .5s;
  -webkit-transition: all .5s;
}
.videoItem:hover .thumbnail:after {
  opacity:0;
}
.duration {
  position:absolute;
  height:18px;
  z-index:2;
  bottom:5px;
  right:5px;
  background:rgba(0,0,0,.9);
  color:#fff;
  padding:2px 6px;
  font-size:12px;
  font-weight:bold;
  text-transform:uppercase;
}
.play {
  position: absolute;
  display: block;
  background-position: 0 0;
  background-repeat: no-repeat;
  background-image: url(https://static1.dmcdn.net/images/home/play.png.v11b2fefa92a0dc9b);
  height: 36px;
  left: 50%;
  margin-left: -18px;
  margin-top: -18px;
  top: 50%;
  width: 36px;
  z-index: 2;
  -webkit-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
}
.category {
  font-size:11px;
  margin:2px 0;
  text-transform:uppercase;
  font-weight:bold;
  color:#aaa;
}
.category.promoted {
  color:#e09021;
}
.title {
  font-weight:bold;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;  
  overflow : hidden;
  text-overflow: ellipsis;
}
.title a:hover {
  text-decoration:none;
  color:#0079B8;
}
.author {
  color:#7F7F7F;
  font-size:13px;
}


What I have tried:

Please help me to disable/remove the download button
Posted
Updated 2-Oct-19 7:56am

1 solution

Rate this:
Please Sign up or sign in to vote.

Solution 1

The best way to go with this would be to use a specific video player, instead of relying on whatever the browser is going use to render the content.

You could try the CSS or Video element methods in the SO post... But you are still relying on browser specific implementations so your mileage may vary
html5 - In Chrome 55, prevent showing Download button for HTML 5 video - Stack Overflow[^]
   
Comments
Smart One 2-Oct-19 19:06pm
   
Thank you for the answer, I have try all the solution in your link, but unfortunately it still didn't work for Chrome.
MadMyche 2-Oct-19 20:43pm
   
Then you are going to need your own video player; which allows for customization, instead of using the browsers in-built player
Smart One 2-Oct-19 20:55pm
   
Thank you for your suggestion, but currently I still need this video HTML due to comfortable for me to create responsive video grid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100