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

[Anonymous]

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

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

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

На данный момент я придумал следующие способы:

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

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

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

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

[*]


alt="{ video title here }" />



{ video title here }




Подробнее здесь: https://stackoverflow.com/questions/512 ... nail-image