video - 创建没有下载按钮的响应式视频网格

问题描述

我创建了响应式视频网格。我想禁用/删除下载视频按钮。请帮我解决这个问题。视图很好，唯一的问题是按钮，我不想要那个。这是我正在尝试的代码，您可以在此处看到：

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

<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>

如何禁用或删除下载按钮？

标签： video

video - 创建没有下载按钮的响应式视频网格

问题描述

解决方案

推荐阅读