Вставить не квадратное видео Youtube как квадратное

Question

Я хочу встроить не квадратное видео Youtube в виде квадрата на моем веб-сайте.

Установка width="" и height="" в iframe работает, чтобы сделать игрока квадратным.Тем не менее, видео внутри не квадратное: сверху и снизу есть черные полосы.

Есть ли способ заставить плеер «увеличивать» и воспроизводить видео в квадрате?

<iframe width="200" height="200" src="https://www.youtube.com/embed/8nt3edWLgIg?autoplay=0&playsinline=1&showinfo=0&modestbranding=1" allow="encrypted-media"></iframe>

PS: встраивание не работает во фрагментах stackoverflow, поэтому вот ссылка на jsbin: https://jsbin.com/felosadewi/edit?html,output

Answer 1

Мне удалось получить чистое решение CSS для вашего шоу, видео обрезано так, чтобы уместить его в поле 1: 1.

https://jsbin.com/woralocoti/edit?html,output

Я не сделал этого, поставив видеов окне с фиксированным соотношением сторон (16: 9), используя padding-bottom:56%; (16/9).

, а затем центрируйте это поле в поле 1: 1 с помощью overflow:hidden;