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

Разместить видео 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

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

Миниатюры youtube


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

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

4 Comments

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

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

      заменить на

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

      например:

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

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

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

Leave a Reply

Your email address will not be published. Required fields are marked *