С ролика Ютуб очень просто вытянуть картинку. Адрес страницы YouTube (см. в адресной строке браузера) содержит идентификатор видео:
http://www.youtube.com/watch?v=JMJXvsCLu6s
Код изображения |
<img src="//img.youtube.com/vi/JMJXvsCLu6s/3.jpg" width="120" height="90"> |
<img src="//img.youtube.com/vi/JMJXvsCLu6s/2.jpg" width="120" height="90"> |
<img src="//img.youtube.com/vi/JMJXvsCLu6s/1.jpg" width="120" height="90"> |
<img src="//img.youtube.com/vi/JMJXvsCLu6s/default.jpg" width="120" height="90"> |
<img src="//img.youtube.com/vi/JMJXvsCLu6s/mqdefault.jpg" width="320" height="180"> |
<img src="//img.youtube.com/vi/JMJXvsCLu6s/hqdefault.jpg" width="480" height="360"> <img src="//img.youtube.com/vi/JMJXvsCLu6s/0.jpg" width="480" height="360"> |
<img src="//img.youtube.com/vi/JMJXvsCLu6s/sddefault.jpg" width="640" height="480"> |
<img src="//img.youtube.com/vi/JMJXvsCLu6s/maxresdefault.jpg"> |
Код видео YouTube любого размера (см. как сделать резиновое) |
<iframe src="//www.youtube.com/embed/JMJXvsCLu6s" frameborder="0" allowfullscreen width="882" height="501"></iframe>
|
Простой пример использования
Обычно я предпочитаю модальные окна на CSS, чтоб видео подгружалось сразу, чтоб оставшийся экран гас. А тут брат сообщил, что часто окно с YouTube уменьшает и уводит на задворки экрана монитора. То есть он и смотрит ролик в полглаза, и, скажем, играет в покер. Поэтому сегодня видеоролик открываем именно в другом окне браузера.
<a href="http://www.youtube.com/embed/JMJXvsCLu6s" target="_blank" onClick="window.open(this.href, '', 'width='+screen.availWidth/2+',height='+screen.availHeight/2+',top='+screen.availHeight/4+',left='+screen.availWidth/4); return false;"> <img title="видео: переправа" alt="переправа" src="http://img.youtube.com/vi/JMJXvsCLu6s/mqdefault.jpg" height="180" width="320"/> </a>
30 комментариев:
http://img.youtube.com/vi//default.jpg
http://img.youtube.com/vi//hqdefault.jpg
http://img.youtube.com/vi//mqdefault.jpg
http://img.youtube.com/vi//sddefault.jpg
http://img.youtube.com/vi//maxresdefault.jpg
screen.availWidth/2 - это половина ширины экрана браузера
или
width=500,height=
где 500 или др. значение это фиксированное значение в px
Посмотрите тут http://shpargalkablog.ru/2010/09/postroenie-ssylok-v-html.html Нужно ввести текст ссылки/адрес изо и выбрать пункт "открыть в новом окне"
В результате, ничего, из приведенного на данной странице - не обнаружил.
А простое введение кода я знаю. Но при этом, нет дополнительного окна!!!
Не может быть, что такой простой вариант не работает. На этой странице http://shpargalkablog.ru/2011/02/modalnoe-okno-css.html есть экземпляр посложнее.
Покажите страницу (URL-адрес), где вы разместили код, интересно что там в исходном коде.
+ В результате вставки кода ломается вся архитектура страницы :(
Комментарий 17. Нужно нажать на любое место вне видео. Кнопку закрыть думаю приспособить сумеете.
Админ можешь сам убедится, это реально работает и времени сэкономит много
body:after {
position: fixed;
z-index: 10;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: rgba(0,0,0,.5);
}
А для общения между окнами используйте window.opener: http://shpargalkablog.ru/2014/10/window-open-javascript.html#two
Посмотрите ещё тут про видео http://shpargalkablog.ru/2011/02/modalnoe-okno-css.html