Как я могу щелкнуть по div, чтобы открыть ссылку на YouTube? ⇐ CSS

[Anonymous]

Я создал специальную кнопку воспроизведения в формате PNG, которая появляется, когда курсор наводится на миниатюру видео. Но теперь видео не кликабельно. Если я установлю для событий указателя значение «Нет», событие наведения не появится.
HTML:

Код: Выделить всё

[url=https://www.youtube.com/watch?v=MVTQJQQkj4E]
[img]afp_images/photographs/musicvideos/UNTAINTED_THUMBNAIL.jpg[/img]
[/url]

[img]afp_images/photographs/musicvideos/playbuttonoverlay.png[/img]

CSS

Код: Выделить всё

.videothumbnail img{
width: 100%;
object-fit: contain;
display: block;
}

.videothumbnail{
overflow: hidden;
position: relative;
}

.videothumbnail img{
transition: transform .3s ease;
}

.videothumbnail:hover img {
transform: scale(1.1);
}

.playbutton{
position: absolute;
width: 100%;
height: 100%;
top: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.521);
opacity: 0;
transition: .3s;
}

.playbutton:hover{
opacity: 1;
}

Вместо того, чтобы использовать наложение кнопки воспроизведения в HTML, я попытался использовать его как фоновое изображение в CSS, но это тоже не сработало. Помощь будет принята с благодарностью. Не лучше ли просто создать форму кнопки воспроизведения с помощью необработанного CSS и наложить ее поверх ссылки на видео? Как бы я это сделал? Я решил, что проще всего будет использовать наложение изображений.
У меня нет знаний jquery, но я надеюсь, что можно обойтись и без него.

Подробнее здесь: https://stackoverflow.com/questions/791 ... utube-link