++++++++++++++++++

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

 Понедельник Декабрь 22nd, 2014Юзабилити 2 213

Разместить видео 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(http://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(http://stepfor.top/myimg/icons/button-youtube-black.png);} /* END-Видео 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

---

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

---

0

0

0

0

0

0

0

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

• Простой HTML шаблон электронного письма, HTML e-mail + простое редактирование.
• Дизайн отзывов, рекомендаций — тестимониал (testimonial) для сайта
• Всплывающее окно на CSS
• Плавный спойлер — спойлер для сайта с плавным открытием и закрытием
• Кнопки CSS «скачать», «купить» выполненные с помощью псевдоэлемента :after

  youtube, видео, всплывающем, окне. Закладка.