Разместить видео Youtube во всплывающем окне на сайте просто. Ниже представляю Вашему вниманию вариант, когда на странице сайта показывается только изображение из видео, которое загружено на Youtube. При нажатии на это изображение открывается всплывающее окно, в котором непосредственно это видео можно посмотреть.
Вариант 1 — Видео во всплывающем окне проигрывается автоматически
Вариант 2 — Видео проигрывается после нажатия кнопки Play
Но для начала рассмотрим структуру видео на Youtube.
Каждое видео на Youtube имеет свою личную ссылку следующего вида:
http://www.youtube.com/watch?v=Bd4YzrqWsY0
где после знака равно, для видео присваивается личный идентификационный номер, состоящий из сочетания 11 букв и цифр. Я назвала этот код ID youtube video и ниже в HTML коде всплывающего окна он будет обозначен как: ID_youtube_video.
HTML
Вариант 1
1 |
<center><div id="youtubepopup"><a href="javascript:void(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
1 |
<center><div id="youtubepopup"><a href="javascript:void(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
Теперь вам осталось только добавить эти стили в файл стилей вашего сайта.
1 2 3 4 5 6 7 |
/* Видео 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
Миниатюра по умолчанию:
1 |
https://img.youtube.com/vi/ID_youtube_video/default.jpg |
Высокое качество миниатюры:
1 |
https://img.youtube.com/vi/ID_youtube_video/hqdefault.jpg |
Маленькое качество миниатюры:
1 |
https://img.youtube.com/vi/ID_youtube_video/mqdefault.jpg |
Стандартное качество миниатюры:
1 |
https://img.youtube.com/vi/ID_youtube_video/sddefault.jpg |
Максимальный размер миниатюры:
1 |
http://i1.ytimg.com/vi/ID_youtube_video/maxresdefault.jpg |
Миниатюры youtube
1 2 3 4 |
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
1 |
<center><div id="youtubepopup"><a href="javascript:void(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
Теперь вам осталось только добавить эти стили в файл стилей вашего сайта.
1 2 3 4 5 6 7 |
/* Видео 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
Максимальный размер миниатюры:
1 |
http://i1.ytimg.com/vi/ID_youtube_video/maxresdefault.jpg |
Миниатюры youtube
1 2 3 4 |
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 |
Мне необходимо, чтобы во всплывающем окне проигрывался плейлист с ютуба. Есть ли возможность такое сделать?
Raistlin, для того чтобы проиграть playlist нужно ссылку
заменить на
где PLAYLIST_ID — это идентификатор плейлиста. Он всегда начинается с PL
например:
то есть код полностью будет
А как сделать, на сайте нажали плей, открылось всплывающее окошко и чтобы ролик сразу проигрывался?
Павел! Спасибо за вопрос.Специально внесла изменения в статью.
Вот код для Вашего варианта: