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

<center><div id="youtubepopup"><a  (0)" onClick="javascript:window.open('http://www.youtube.com/embed/ID_youtube_video', 'Youtube video', 'width=990,height=567,scrollbars=NO,left=150,top=50');"> <span></span><img src="http://i1.ytimg.com/vi/ID_youtube_video/mqdefault.jpg" alt="" /></a></div> </center>

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

<center><div id="youtubepopup"><a  (0)" onClick="javascript:window.open('http://www.youtube.com/embed/ID_youtube_video?autoplay=1', 'Youtube video', 'width=990,height=567,scrollbars=NO,left=150,top=50');"> <span></span><img src="http://i1.ytimg.com/vi/ID_youtube_video/mqdefault.jpg" alt="" /></a></div> </center>

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

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

/* Видео youtube в всплывающем окне */ 
 #youtubepopup {width: 320px; height: 180px; } 
 #youtubepopup a {position:relative; float: left; margin:5px;} 
 #youtubepopup a span { display:block; background-image:url(https://stepfor.top/myimg/icons/button-youtube-red.png); background-repeat:no-repeat; width:86px; height:60px; position:absolute; left:50%; top:50%; margin-top: -30px; margin-left:-43px; } 
 #youtubepopup img { border: solid 1px #999; padding:5px; }
 #youtubepopup a:hover span {background-image:url(https://stepfor.top/myimg/icons/button-youtube-black.png);}
/* END-Видео youtube в всплывающем окне */ 

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

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

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

https://img.youtube.com/vi/ID_youtube_video/default.jpg

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

https://img.youtube.com/vi/ID_youtube_video/hqdefault.jpg

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

https://img.youtube.com/vi/ID_youtube_video/mqdefault.jpg

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

https://img.youtube.com/vi/ID_youtube_video/sddefault.jpg

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

http://i1.ytimg.com/vi/ID_youtube_video/maxresdefault.jpg

Миниатюры youtube

http://img.youtube.com/vi/ID_youtube_video/0.jpg
http://img.youtube.com/vi/ID_youtube_video/1.jpg
http://img.youtube.com/vi/ID_youtube_video/2.jpg
http://img.youtube.com/vi/ID_youtube_video/3.jpg

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

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

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

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

HTML

<center><div id="youtubepopup"><a  (0)" onClick="javascript:window.open('http://www.youtube.com/embed/ID_youtube_video', 'Youtube video', 'width=800,height=550,scrollbars=NO,left=250,top=100');"> <span></span><img src="http://i1.ytimg.com/vi/ID_youtube_video/mqdefault.jpg" alt="" /></a></div> </center>

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

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

/* Видео youtube в всплывающем окне */ 
 #youtubepopup {width: 320px; height: 180px; } 
 #youtubepopup a {position:relative; float: left; margin:5px;} 
 #youtubepopup a span { display:block; background-image:url(https://stepfor.top/myimg/icons/button-youtube-red.png); background-repeat:no-repeat; width:86px; height:60px; position:absolute; left:38%; top:30%;  } 
 #youtubepopup img { border: solid 1px #999; padding:5px; }
 #youtubepopup a:hover span {background-image:url(https://stepfor.top/myimg/icons/button-youtube-black.png);}
/* END-Видео youtube в всплывающем окне */ 

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

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

http://i1.ytimg.com/vi/ID_youtube_video/maxresdefault.jpg

Миниатюры youtube

http://img.youtube.com/vi/ID_youtube_video/0.jpg
http://img.youtube.com/vi/ID_youtube_video/1.jpg
http://img.youtube.com/vi/ID_youtube_video/2.jpg
http://img.youtube.com/vi/ID_youtube_video/3.jpg