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

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

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

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

До сих пор я пришел к следующему:

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

Я надеялся, что смогу просто добавить класс к изображению и использовать 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>

Ответы

Ответ 1

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

Ответ 2

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

.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, который используется для хранения надписи.

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

.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; 
}

Ответ 3

Вы также можете использовать сервис

http://halgatewood.com/youtube/

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

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

Изменить:

служба была снята, угадайте, что слишком много людей бомбардировали его:) теперь он находится на github

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

Вот еще одна услуга, которая делает то же самое (как предложено muktesh patel):

http://www.giikers.com/iwc

Ответ 4

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

<a class="youtube" href="#" onclick="location.href='http://youtube.com/watch?v={video id here}'; return false;">
    <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%;
}