Эффективный способ размещения видео с YouTube

Небольшой скрипт на jQuery для быстрого, красивого и эффективного размещения видеороликов с YouTube на страницах вашего сайта.

Возможности:
  • Добавление видео одним элементом div с атрибутом youtube
  • Возможность устанавливать свой эскиз добавив атрибут poster
  • Ширина видеоролика задается в 100%, что позволяет ему правильно отображаться в любом контейнере и на любом экране.
  • Видео не загружается до тех пор, пока не запущено вручную, что не вредит скорости загрузки страницы.
  • Оформление рамки и кнопки плей под стиль сайта.

Примеры:

Постер с YouTube
Свой постер

HTML:

Где атрибут youtube - это ID видео, а постер берется в формате sddefault с обрезкой под 16:9. Другие форматы можно выбрать в теме про ссылки на эскизы и заменить путь в JS.

Или:

Где атрибут poster - путь к собственной картинке, которая также будет обрезаться под формат 16:9.

CSS:

jQuery:

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

Добавить комментарий:

Ваш комментарий отправлен!