Как нормально вставить iframe с youtube видео?

Question

[DrunkMaster]

Ютуб выдаёт код для вставки с фиксированной шириной и высотой, например:
width="500" height="250"
Именно так, без указания px

Раньше если указать width="100%" то высота становится автоматически в соотношении с шириной, например если реальная ширина 100% это 1000px то высота станет 500 а не 250, теперь же код вида:

<iframe 
width="100%" height="auto" 
src="https://www.youtube.com/embed/UYKGIDGFsd?rel=0" frameborder="0" allowfullscreen>
</iframe>

В результате видос растягивается на 100% страницы но по высоте занимает узкую полоску на глаз где-то пикселей 150, что выглядит ужасно. Как это побороть не знавая фикс. высоту? (потому что есть телефоны, планшеты и куча других гаджетов)

Answer 1

[Владимир Скибин]

Попробуйте вставить пустой iframe - даже у него будет высота 150px.
https://plnkr.co/edit/6lK3df5fQM8JuVG6kXm1?p=preview
Для embed контента из youtube все по стилям height:100% и соответственно растягивается на высоту родителя, т.е. iframe.
Соответственно, не зная характеристик видео Вы врядли сможете угадать с правильным размером, разве что поэкспериментировать с JS и соотношениями 4*3, 16*9, 16*10 для iframe. Видео внутри подстроится.

Comments

[DrunkMaster]

Так раньше вроде нормально всё вставлялось, с каких пор высота iframe о умолчанию 150?

[Владимир Скибин]

DrunkMaster, Ответ по поводу 150 возможно найдете тут
А то что по высоте iframe внутри ничего не растягивает, то там нет ничего абсолютного только относительное

Answer 2

[Alexandr Alexandrov]

Попробуйте переопределить через videojs.com
Пример https://jsfiddle.net/yu3ver/sdm35v03/