Как я могу отключить/удалить кнопку загрузки на проигрывателе видеогалереи?
Как отключить/удалить кнопку загрузки на проигрывателе видеогалереи ?
Вот мой HTML и CSS код :
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; }
Что я уже пробовал:
Пожалуйста, помогите мне отключить/удалить кнопку загрузки