Как наложить кнопку воспроизведения на миниатюру YouTube

В проекте, над которым я работаю, мы собираем кучу видеороликов YouTube, которые наша команда по работе со СМИ опубликовала в базу данных, чтобы мы могли представить их как связанный контент.

Что-то, что мы хотели бы сделать, это наложить кнопку воспроизведения поверх сгенерированных миниатюр YouTube, чтобы было более очевидно, что миниатюра представляет собой видео, которое можно воспроизвести.

Я ищу лучший способ сделать это - я провел некоторые поиски, и либо никто не заинтересован в этом, действительно очевидно, как это сделать, либо я просто изо всех сил пытаюсь найти правильные условия поиска.

Способы, которые я придумал до сих пор:

  1. Используйте контейнер div с фоновым изображением воспроизведения и уменьшите непрозрачность миниатюры, чтобы кнопка воспроизведения отображалась поверх миниатюры. Я не большой поклонник этого из-за дополнительного div, и, похоже, он не работает в IE.
  2. Пакетная обработка миниатюр в фотошопе — изменение их так, чтобы у них была кнопка воспроизведения. Это было бы несколько прискорбно, потому что мы каждую ночь загружаем видео, поэтому иногда могут быть видео без кнопок воспроизведения.
  3. Измените процесс импорта, чтобы динамически создавать новые эскизы с помощью кнопки воспроизведения. Это устранило бы обе вышеперечисленные проблемы, но сделать это будет сложнее.

Я надеялся, что смогу просто добавить класс к изображению и использовать javascript и/или CSS для наложения изображения.

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

Текущий html (опубликовано OP в комментариях):

<li>
    <a 
        class="youtube" 
        title="{ video id here }" 
        href="youtube.com/watch?v={video id here}">
             <img 
                 src="i3.ytimg.com/vi{ video id here }/default.jpg" 
                 alt="{ video title here }" />
    </a><br /> 
    <a 
        class="youtube" 
        title="{vide id here }" 
        href="youtube.com/watch?v={ video id here }">
             { video title here }
    </a>
</li>

jquery css youtube photoshop
person someoneinomaha    schedule 25.02.2011    source источник
comment
Только что обнаружил этот пост, который может быть решением, аналогичным первой идее, о которой я упоминал выше: stackoverflow.com/questions/785458/   -  person someoneinomaha    schedule 26.02.2011
comment
Какую разметку вы сейчас используете для отображения миниатюр?   -  person ajcw    schedule 26.02.2011
comment
Это зависит от того, где на сайте, но это пример: ‹li›‹a class=youtube title={ идентификатор видео здесь} href=youtube.com/watch?v={идентификатор видео здесь}›‹img src=i3.ytimg.com/vi{ идентификатор видео здесь }/default.jpg alt={ название видео здесь } /›‹/a›‹br /› ‹a class=youtube title={видео идентификатор здесь } href=youtube.com/watch?v={ идентификатор видео здесь }› { название видео здесь }‹/a›‹/li›   -  person someoneinomaha    schedule 26.02.2011
comment
Извиняюсь за неправильное написание слова «ты» выше! Не могу отредактировать ;о)   -  person ajcw    schedule 26.02.2011

Ответы (4)


arrow_upward
37
arrow_downward 

<div class="video">
    <img src="thumbnail..." />
    <a href="#">link to video</a>
</div>

css

.video { position: relative; }

.video a {
   position: absolute;
   display: block;
   background: url(url_to_play_button_image.png);
   height: 40px;
   width: 40px;
   top: 20px;
   left: 20px;
}

Я бы сделал что-то подобное. В любом случае, я не думаю, что стоит публиковать изображения, чтобы добавить кнопку воспроизведения. Что делать, если вам нужно, например, изменить дизайн кнопки?

Если вы хотите центрировать кнопку, хороший способ сделать это — установить верхний и левый края на 50%, а затем добавить отрицательные поля, равные половине размера кнопки:

.video a {
   position: absolute;
   display: block;
   background: url(url_to_play_button_image.png);
   height: 40px;
   width: 40px;
   top: 50%;
   left: 50%;
   margin: -20px 0 0 -20px;
}
person Robin    schedule 25.02.2011
comment
не забудьте position: absolute для кнопки воспроизведения. - person gilly3; 26.02.2011
comment
Что я делаю неправильно, если фоновое изображение остается за изображением? - person someoneinomaha; 26.02.2011
comment
Я добавил значение z-index для a-тега, но фоновое изображение остается за миниатюрой. - person someoneinomaha; 26.02.2011
comment
Я изменил значения высоты/ширины сверху/слева, и это сработало. Спасибо всем за помощь. - person someoneinomaha; 26.02.2011
comment
Это именно то, что мне было нужно, и это сработало прекрасно. Спасибо! - person coredumperror; 19.07.2012
comment
Не работает html в электронной почте, потому что gmail, Yahoo не поддерживает position: absolute; . у вас есть идеи альтернативного решения? - person Naveen; 06.06.2019

arrow_upward
19
arrow_downward

Один из способов сделать это, который обеспечивает большую гибкость без дополнительной HTML-разметки (в отличие от большинства решений, предлагаемых, когда люди спрашивают о наложении изображений), — это использование селектора :after CSS. Предполагая, что вокруг каждого изображения есть div класса "video", что-то вроде:

.video:after {
    content: "";
    position: absolute;
    top: 0;
    width: 150px;
    height: 120px;
    z-index: 100;
    background: transparent url(play.png) no-repeat center;
    pointer-events: none;
}

Отредактируйте значения для width, height и z-index по мере необходимости в зависимости от остальной части вашей таблицы стилей. Это хорошо работает, не мешая другому коду, который у вас может быть, например, блоку div, используемому для хранения подписи.

Добавьте селектор при наведении для дополнительного эффекта:

.video:hover:after { 
    content: ""; 
    position: absolute; 
    top: 0; 
    width: 150px; 
    height: 120px; 
    z-index: 100; 
    background: transparent url(play_highlight.png) no-repeat center; 
    pointer-events: none; 
}
person otravers    schedule 18.09.2013
comment
Топовое решение. Большое спасибо - person Adam Studenic; 04.12.2015
comment
Не работает html в электронной почте, потому что gmail, Yahoo не поддерживает position: absolute; . у вас есть идеи альтернативного решения? - person Naveen; 06.06.2019

arrow_upward
5
arrow_downward

Вы также можете воспользоваться услугой

http://halgatewood.com/youtube/

Вот так: http://halgatewood.com/youtube/i/youtube_id.jpg ( перенаправляет на амазон)

Например: http://halgatewood.com/youtube/i/aIgY20n3n0Y.jpg ( перенаправляет на амазон)

Редактировать:

сервис закрыли, наверное, слишком много народу его завалило :) теперь он на гитхабе

https://halgatewood.com/easily-add-play-buttons-to-youtube-video-thumbnails/ (ссылка не работает) https://github.com/halgatewood/youtube-thumbnail-enhancer

Вот еще один сервис, который делает то же самое (как предложил Муктеш Пател):

http://www.giikers.com/iwc

person Timo Huovinen    schedule 07.11.2013
comment
Ссылка перенаправляет на амазон - person Tomas K; 16.07.2016
comment
Возьмите вывод get-youtube-thumbnail.com и поместите его в giikers.com/iwc - person Tim Abell; 20.04.2018

arrow_upward
4
arrow_downward

Короткий, чистый, полностью адаптивный, без лишнего HTML:

<a class="youtube" href="http://youtube.com/watch?v={video id here}">
    <img src="http://i3.ytimg.com/vi/{video id here}/default.jpg" alt="{ video title here }" />
</a>

CSS:

.youtube {
    position: relative;
    display: inline-block;
}
.youtube:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 10;
    background: transparent url({play icon url here}) center center no-repeat;
}

PS: Вы даже можете настроить размер значка воспроизведения (в зависимости от размера миниатюры), добавив background-size к .youtube:before стилям.

Например:

.youtube:before {
    background-size: 30%;
}
person Dima L.    schedule 24.05.2016