fbpx
Перейти к содержимому

Видео 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

Больше статей:   Wondershare Video Editor - как вставить свои видеоэффекты

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

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

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

Для того чтобы узнать ссылку на миниатюру, можно воспользоваться сервисом:
Миниатюра Youtube

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

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

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

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

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

Миниатюры youtube

Больше статей:   Как сделать вкладки на сайте | Табы для сайта

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

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

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

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

HTML

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

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

Больше статей:   Каталог Youtube-видео с скриншотами на сайте uCoz (вариант 2)

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

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

Миниатюры youtube

4 комментария для “Видео Youtube во всплывающем окне”

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

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

      заменить на

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

      например:

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

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

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

Добавить комментарий для Natalie - Web First Step Отменить ответ

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