Миниатюрное изображение встроенного видео YouTube ⇐ CSS

[Anonymous]

Я встроил видео с YouTube. Я не могу контролировать конкретное видео на YouTube. В Safari это выглядит великолепно, но в Chrome и Firefox отображается ужасное изображение. Я полагаю, это называется «миниатюрой» изображения? Как сделать так, чтобы миниатюра отображалась во всех браузерах?




Я заметил в Chrome и Firefox, что если я не изменяю размер видео, миниатюра изображения работает. Но, как ни странно, это изображение, отличное от того, которое используется в Safari:


Я получу миниатюру выше, если не использую следующий код (который делает размер видео адаптивным)
figure {
position: relative;
height: 0;
padding-bottom: 56.25%;
overflow: hidden;
margin-bottom: 4rem;
}

iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

Итак, мой вопрос: как мне отобразить миниатюру изображения и адаптировать размер видео?
Я прочитал несколько сообщений о Миниатюры видео YouTube, но я не думаю, что они объясняют, как на самом деле отобразить их до того, как кто-то нажмет на видео.
Как получить миниатюру видео YouTube из API YouTube?
Вот код для встраивания:

https://www.youtube.com/embed/M6F5Cu-Vx ... z0P_s8LLjt



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