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

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

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

Примеры:

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

HTML:

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

Или:

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

CSS:

jQuery:

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

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

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

Комментарии:

  • Дмитрий:

    Спасибо, всё работает.

    Ответить
  • Владимир:

    Доброго времени суток уважаемый. Вопрос, почему некоторые скрипты невозможно вынести во внешний файл, включая данный на ютуб? Он не срабатывает если например создать youtub.js и разместить его хоть до, хоть после разметки.

    Ответить
    • Alexander:

      Все возможно и даже желательно выносить в 1 внешний файл со всеми скриптами.
      Если не работает, нужно смотреть какую выдает ошибку.

      Ответить
      • Владимир:

        Мне тяжело скрипты даются, максимум подредактировать могу что-то. Замечаю всякие мелочи вроде того что недостаточно просто удалить строку в скрипте, чтобы удалить с сайта тот или иной элемент. Он просто не будет исполняться.
        Но вот тут вопрос встал так,скрипт рабочий, а во внешнем файле не работает.У вас я заметил тоже он в страницу встроен.
        Я подозреваю приоритет играет свою роль при конфликте с другими скриптами.

        Ответить
        • Alexander:

          У меня почти все в страницу встроено, так удобнее статью сформировать.
          Дайте ссылку на ваш результат

          Ответить
          • Владимир:

            Да спасибо не будем этому лишнее внимание уделять. Думал может есть сходу какое то правило о котором я не знаю. Это скорее всего конфликт какой-то.

            Ответить