Как вставить и открыть видеоролик в новом окне

Всем привет. Рада видеть вас на своём блоге. Как вставить видео с Ютуб в блоге, чтобы оно открывалось в новом окне поверх текста сообщения. Обращала внимание, что на некоторых сайтах при нажатии на картинку открывается ролик и при этом есть ещё и возможность читать само сообщение. Тот вариант, когда "ловишь двух зайцев."


Кто-то лучше воспринимает информацию визуально, а некоторые, к которым и себя отношу, удобнее читать. В этом случае будет удобно всем.

Для начала нам нужно "выцепить" картинку-превьюшку с ролика youtube. Возможно. есть ещё какой-то вариант, но я нашла пока этот. В адресной строке Ютуба есть идентификатор видео.

Я выделила его красным квадратом. Как правило, сам автор ролика ставит такой значок в виде цифры 0 на своё видео. А если поставить 1.2,3 - это те кадры (картинки),которые подобрал  канал. В итоге мы получаем саму ссылку на превью. Выделенное красным меняйте на нужный адрес.

http://img.youtube.com/vi/ fBrsNVtpQoY/0.jpg

Ну и сейчас обычным способом мы получаем вот такую картинку-превью.

<img src="  http://img.youtube.com/vi/fBrsNVtpQoY/0.jpg" width="300" height="200">

Далее, чтобы открыть просмотр видео в новом окне нам понадобиться следующий код.

<a href="https://www.youtube.com/watch?v=fBrsNVtpQoY " onclick="window.open(this.href, '', 'width='+screen.availWidth/2+',height='+screen.availHeight/2+',top='+screen.availHeight/4+',left='+screen.availWidth/4); return false;" target="_blank">
<img title="видео теремок на новый лад" alt="теремок" src="http://img.youtube.com/vi/ fBrsNVtpQoYs/mqdefault.jpg" height="220" width="340"/>
</a>



В коде первая ссылка на само видео, вторая (синего цвета) на картинку-превью. Зелёный цвет-размеры самого окна. Нажмите на картинку для просмотра.

Вот, и всё. Ролик потешный, посмотрите. Рекомендую для поднятия настроения.

Спасибо за внимание к моему блогу. Удачи всем.

здесь можно оформить подписку на новые шпаргалки

Введите Ваш email