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

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

27 голосов
/ 26 февраля 2011

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

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

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

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

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

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

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

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

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

Ответы [ 4 ]

37 голосов
/ 26 февраля 2011 
<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;
}
17 голосов
/ 18 сентября 2013

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

Добавьте селектор при наведении курсора для дополнительного 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; 
}
4 голосов
/ 25 мая 2016

Короткий, чистый, полностью отзывчивый, без дополнительного 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%;
}
4 голосов
/ 07 ноября 2013

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

http://halgatewood.com/youtube/

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

Например: 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

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

http://www.giikers.com/iwc

...