Click here to Skip to main content
15,867,771 members
Please Sign up or sign in to vote.
1.00/5 (2 votes)
How can I disable/remove the download button on a video gallery player ?
Here my HTML & CSS code :

HTML :
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 :
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 25-Oct-19 6:56am

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[^]
 
Share this answer
 
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.
Short answer, you can't. If you're relying on the browser to include their own CSS for HTML5 video there is absolutely no way to override it as the CSS is being served by a third party... in this case the browser.

What is stopping you from using a third party player in a responsive video grid?
 
Share this answer
 
v2

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



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900