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

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