Заставляем встроенное видео с YouTube проигрываться в HD

У Vimeo есть хорошая поддержка HD видео в режиме встраивания, тогда как YouTube этим похвастаться не может - у него нет расширенной поддержки проигрывания своего встроенного HD видео в режиме 720p, 1080p и более. По крайней мере, об этом ничего не говорится в официальной документации. Но как бы то ни было - есть способ вывести HD контент YouTube на страницу, и сохранить адаптивность видео.

Для начала, скопируйте код для встраивания видео при помощи правого клика на нем. Полученный код будет для версии со стандартным разрешением. Ничего страшного, продолжаем, и вставляем код видео на страницу:

<iframe width="640" height="360" src="//youtube.com/embed/HiN6Ag5-DrU"frameborder="0" allowfullscreen></iframe>

Заметьте, что я упростил ссылку на видео для ясности, предполагая, что просматриваемый HTML будет находиться на сервере. Если вы оставите ваш код нетронутым - ничего страшного.

Если видео доступно в высоком разрешении, надо оставить для него достаточно пространства. Для этого можно удвоить предложенную высоту и ширину (для разрешения 1080p)

<iframe width="1280" height="720" src="//youtube.com/embed/HiN6Ag5-DrU" frameborder="0" allowfullscreen></iframe>

Даже если вы будете изменять размеры посредством CSS, атрибуты width и height удалять нельзя - YouTube опирается на эти размеры, и по ним выдает видео соответствующего разрешения. Если вы уберете эти атрибуты, то видео будет отображено в стандартном разрешении.

Добавьте параметр VQ в конец URL с нужным вам значением:

<iframe width="1280" height="720" src="//youtube.com/embed/HiN6Ag5-DrU?VQ=HD720" frameborder="0" allowfullscreen></iframe>

VQ задает качество видео (Video Quality). HD720 - разрешение, которого мы хотим добиться (для Full HD надо использовать значение HD1080). Если в URL уже присутствуют какие-то параметры, надо использовать символ & в качестве разделителя между параметрами:

?feature=player_detailpage&VQ=HD720

Теперь надо обернуть видео в контейнер. Я для этого использую div:

<div class="responsive-container">
<iframe width="1280" height="720" src="//youtube.com/embed/HiN6Ag5-DrU?VQ=HD720" frameborder="0" allowfullscreen></iframe>
</div>

Наконец, нужно сделать контейнер и видео в нем адаптивными. Это как раз самая хитрая часть, так как YouTube автоматически снизит разрешение видеопотока, так как он видит, что видео занимает меньший размер, чем должно:

.responsive-container {
position: relative;
padding-bottom: 53.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
.responsive-container, .responsive-container iframe {
max-width:1280px;
max-height: 720px;
}
.responsive-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

Вот и все: попробуйте проиграть видео на странице. Когда вы включите проигрывание заметьте, что Google делает кое-что особенно примечательное: YouTube сам адаптирует размер видеопотока под контейнер. Если вы уменьшите размер окна браузера и перезагрузите страницу, YouTube отдаст версию видео, чей размер будет вписываться в доступное пространство.

Подведем итоги:

• если окно браузера или контейнер видео будут малого размера, YouTube автоматически отдаст видео в стандартном разрешении, но видео все же будет адаптивным при изменении размеров. Кроме Firefox качество видео не будет изменяться при уменьшении или увеличении размеров окна. Для большинства браузеров это имеет смысл, так как YouTube считает, что это полный размер окна устройства, на котором просматривается видео, и отдает наиболее подходящую для него версию видео.
• Если изначально окно браузера имеет достаточные размеры, чтобы вместить HD версию видео, оно продолжит проигрываться в высоком разрешении при любых изменениях размера окна. Опять же, исключение составляет браузер Firefox - он переподключается к серверам и отображает видео в меньшем разрешении, если размеры окна становятся меньше размеров HD.