Smart One Ответов: 2

Как я могу отключить/удалить кнопку загрузки на проигрывателе видеогалереи?


Как отключить/удалить кнопку загрузки на проигрывателе видеогалереи ?
Вот мой 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;
}


Что я уже пробовал:

Пожалуйста, помогите мне отключить/удалить кнопку загрузки

2 Ответов

Рейтинг:
1

Dan Parks

Короткий ответ, вы не можете. Если вы полагаетесь на браузер, чтобы включить свой собственный CSS для видео HTML5, то нет абсолютно никакого способа переопределить его, поскольку CSS обслуживается третьей стороной... в данном случае это браузер.

Что мешает вам использовать сторонний плеер в адаптивной сетке видео?


Рейтинг:
0

MadMyche

Лучший способ сделать это-использовать конкретный видеоплеер, а не полагаться на то, что браузер будет использовать для визуализации контента.

Вы можете попробовать методы CSS или Video element в SO post... Но вы все еще полагаетесь на конкретные реализации браузера, поэтому ваш пробег может варьироваться
html5 - в Chrome 55, запретить показывать кнопку загрузки для HTML 5 видео - переполнение стека[^]


Smart One

Спасибо за ответ, я попробовал все решение в вашей ссылке, но, к сожалению, оно все еще не работало для Chrome.

MadMyche

Тогда вам понадобится ваш собственный видеоплеер, который позволяет настраивать его, а не использовать встроенный в браузеры плеер

Smart One

Спасибо за ваше предложение, но в настоящее время мне все еще нужен этот html-код видео из-за удобного для меня создания адаптивной сетки видео.