Показывать видео и миниатюру Youtube в правильном формате 9:16

Согласно документации API:

Тег со значением атрибута yt:name, равным mqdefault, идентифицирует миниатюру изображения размером 320x180 (16:9). Это изображение также не имеет метки времени и может быть взято из любой точки видео.

Таким образом, есть изображение, доступное для каждого разрешения видео (по крайней мере, которое я тестировал) в формате 16:9. Конечно, это не самое большое изображение на планете...

Если размер является проблемой, и вам нужно что-то большее, то лучший вариант — выбрать один из доступных вариантов, который всегда в соотношении 4:3, и скрыть лишнее с помощью CSS. YouTube уже давно делает это . Теперь они используют несколько размеров эскизов на своем сайте, включая mqdefault.jpg.

Очень легко скрыть лишнюю ширину и/или высоту изображения, когда известны все размеры. Вот пример использования изображения 4:3 с YouTube со скрытыми черными полосами, что дает результат 16:9. CSS прокомментирован для вашего удовольствия.

YouTube предлагает изображения без черных полос с соотношением сторон 4:3. Чтобы получить миниатюру видео 16:9 без черных полос, попробуйте один из следующих способов:

http://img.youtube.com/vi/<insert-youtube-video-id-here>/mqdefault.jpg
http://img.youtube.com/vi/<insert-youtube-video-id-here>/maxresdefault.jpg

Первый mqdefault представляет собой изображение размером 320x180 пикселей.

Второй maxresdefault представляет собой изображение размером 1500x900 пикселей, поэтому его размер необходимо изменить для использования в качестве эскиза. Это красивое изображение, но оно не всегда доступно. Если видео имеет низкое качество (менее 720p, я думаю, не совсем уверен), то это «maxresdefault» становится недоступным. Так что никогда не полагайтесь на это.

После некоторого поиска в сети решения этой проблемы я ничего не нашел, я думаю, что перепробовал все, и ничто не решило мою проблему. Затем, руководствуясь своей логикой, я просто обернул iframe встроенного видео YouTube в один набор div overflow: hidden; к этому div и сделал его высоту на 2 пикселя меньше, чем высота iframe (на моем видео внизу была черная рамка). Таким образом, div-оболочка меньше, чем iframe, и, расположив его над видео, вы можете скрыть ненужные черные границы. Я думаю, что это лучшее решение из всего, что я пробовал до сих пор.

В этом примере ниже попробуйте встроить только iframe, и вы увидите маленькую черную рамку внизу, а когда вы поместите iframe в div, граница исчезнет, ​​потому что div перекрывает iframe и меньше, чем видео, и это имеет переполнение: скрыто, поэтому все, что выходит за пределы размеров div, скрыто.

<div id="video_cont" style="width: 560px;
                            height: 313px;
                            overflow: hidden;">


    <iframe id="the-video" class="extplayer" width="560" height="315" src="https://www.youtube.com/embed/EErx017kDHQ?&amp;autoplay=0&amp;rel=0&amp;fs=0&amp;showinfo=0&amp;controls=0&amp;hd=1&amp;wmode=transparent&amp;version=2;yt:quality=high;"   frameborder="0" allowfullscreen></iframe>

</div>

В моем случае граница была высотой около 2 пикселей, поэтому я сделал оболочку div на 2 пикселя меньше по высоте, чтобы скрыть границу, в вашем сценарии, если граница находится вверху видео или по бокам и/или с разными размерами, вы нужно сделать разные размеры для div-оболочки и расположить его так, чтобы он перекрывал видео там, где есть границы, и с переполнением: скрыто; границы скрыты.

Надеюсь, это поможет.