Видео Youtube во всплывающем окне

Разместить видео youtube на сайте просто. Ниже представляю Вашему вниманию вариант, когда на странице сайта показывается только изображение из видео, которое загружено на Youtube. При нажатии на это изображение открывается всплывающее окно, в котором непосредственно это видео можно посмотреть.

Вариант 1 — Видео во всплывающем окне проигрывается автоматически

Вариант 2 — Видео проигрывается после нажатия кнопки Play

Но для начала рассмотрим структуру видео на Youtube.

Каждое видео на Youtube имеет свою личную ссылку следующего вида:
http://www.youtube.com/watch?v=Bd4YzrqWsY0

где после знака равно, для видео присваивается личный идентификационный номер, состоящий из сочетания 11 букв и цифр. Я назвала этот код ID youtube video и ниже в HTML коде всплывающего окна он будет обозначен как: ID_youtube_video.

HTML
Вариант 1

Вариант 2
Для того, чтобы видео во всплывающем окне проигрывалось автоматически нужно к ссылке добавить: ?autoplay=1

Обратите внимание, что в этом HTML вам нужно будет поменять ID_youtube_video на ID вашего видео два раза.

CSS
Теперь вам осталось только добавить эти стили в файл стилей вашего сайта.

Миниатюры видео Youtube

Миниатюра по умолчанию:

Высокое качество миниатюры:

Маленькое качество миниатюры:

Стандартное качество миниатюры:

Максимальный размер миниатюры:

Миниатюры youtube


Подпишитесь на RSS канал - если Вы хотите первыми узнавать о новых статьях на сайте!!!

Статьи по теме:

4 комментария

  1. Мне необходимо, чтобы во всплывающем окне проигрывался плейлист с ютуба. Есть ли возможность такое сделать?

    • Raistlin, для того чтобы проиграть playlist нужно ссылку

      заменить на

      где PLAYLIST_ID — это идентификатор плейлиста. Он всегда начинается с PL

      например:

      то есть код полностью будет

  2. А как сделать, на сайте нажали плей, открылось всплывающее окошко и чтобы ролик сразу проигрывался?

    • Павел! Спасибо за вопрос.Специально внесла изменения в статью.
      Вот код для Вашего варианта:

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *