Я создал Responsive Video Grid. Я хотел бы отключить / удалить кнопку загрузки видео. Пожалуйста, помогите мне решить эту проблему. Представление в порядке, единственная проблема - кнопка, я не хочу этого. Вот код, который я пытаюсь, как вы можете видеть здесь:
Также на codepen
/*
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>
Как отключить или удалить кнопку загрузки?