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

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


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

Для начала нам нужно "выцепить" картинку-превьюшку с ролика 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


4 комментария:

  1. На самом деле, плеер YouTube уже оптимизирован и особой нужды открывать его в новом окне нет, но как вариант – согласен! Просто изначально в плеер подгружается именно картинка, с HTML5 оказалось возможно отказаться от Flash, ну и есть функция – развернуть на весь экран ;)

    ОтветитьУдалить
    Ответы
    1. Костя , Я на одном из сайтов увидела такой вариант но сама при этом читала там сообщение. И что-то не совсем понятно было. Тут же ролик был в таком виде вот и бегала глазами от видео к тексту. Так быстро информацию схватили. Вообще-то я люблю текстом воспринимать. Но это было удачным случаем. Вот и решила попробовать реализовать.

      Удалить
  2. Вика, а если в одно сообщение вставлять 2-3 видео - это не сильно влияет на загрузку страницы?

    ОтветитьУдалить
    Ответы
    1. Конечно влияет. Но не смертельно.

      Удалить

Пользовательский поиск
Foto Saya
My Photo