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