Сервис YouTube предоставляет код для встраивания видео, хранящихся у них, на веб-страницу. Обычно это хорошая идея размещать видео на сайте YouTube: этот сервис поддерживает высококачественные видео в кодировке H.264, дает возможность предоставлять Ваше видео широкой аудитории, для воспроизведения могут использоваться и Flash, и HTML5 технологии, а также с Вашего сервера снимается нагрузка от размещения и хранения видео.

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

<iframe width="560" height="315" src="https://www.youtube.com/embed/0MP_G6arpVI?rel=0&amp;controls=0&amp;showinfo=0" frameborder="0" gesture="media" allowfullscreen></iframe>

Сайт YouTube использует элемент <iframe> для подключения видео. В этом случае присутствует возможность разрешить устройству выбор типа видео для воспроизведения: например, мобильные устройства могут использовать видео по технологии HTML5, а старые версии браузеров по-прежнему будут применять технологию Flash. В этом случае код может быть, например, таким:

<iframe class="youtube-player" type="text/html" style="width: 640px; height: 385px;" src="http://www.youtube.com/embed/GOawKqRvr8s" frameborder="0">
</iframe>

Ниже Вы можете видеть пример встраивания видео:

Можно начать показ видео с сайта YouTube с определенного момента с помощью приема, называемого глубинным связыванием. Для этого нужно добавить в ссылку на видео следующее:

<iframe class="youtube-player" type="text/html" style="width: 640px; height: 385px;" src="http://www.youtube.com/embed/GOawKqRvr8s&amp;start=80" frameborder="0">
</iframe>

Значение start измеряется в секундах, то есть, если оно равно 80, то видео будет показываться с 1 минуты 20 секунд.

Обратите внимание на использование объекта HTML &amp; между переменными в ссылке: если вместо него использовать просто &, страница будет недоступна. Как Вы, вероятно, знаете, в ссылке после символа & всегда располагаться объект HTML, а если нужен именно символ амперсанта, то используется запись &amp;.

Несколько странно, но в ссылке на определенный момент на видео на сайте YouTube без встраивания запись выглядит иначе:

<a href="http://www.youtube.com/watch?v=0MP_G6arpVI#t=0m40s">http://www.youtube.com/watch?v=0MP_G6arpVI#t=0m40s</a>

В этом случае значение переменной t означает начало видео с 40 секунд.

Сайт Vimeo может быть упомянут как альтернатива сайту YouTube: он предназначен для более творческих, художественных, высококачественных, длинных видео.

Наконец, и Vimeo, и YouTube поддерживают HTML5 в некоторых браузерах.

Автор урока Dudley Storey

Перевод — Дежурка

Смотрите также:

• Адаптивный дизайн для встроенных видео с сайтов Youtube и Vimeo
• Создание адаптивного дизайна для встроенной Google карты
• Свойство переноса оформления блока для разбитого переводом строки текста