Как оригинально вставить видео с Youtube в сообщении.

видео в сообщении
Хочу предложить вам интересное решение для установки видео с Youtube или любого другого видеохостинга в сообщение блога. Сейчас видио-ролики являются очень мощным инструментом, чтобы более наглядно и в полной мере донести ту или иную информацию.
Или иногда просто хочется  поделиться с друзьями на странице блога своим видео о праздновании днюхи, своём отпуске или о проделках любимого чада.



Для начала нам необходимо подобрать картинку, которая будет соответствовать информации видео. А может быть, даже просто красивая кнопка с предложением посмотреть ролик. Желательно не очень большого размера. И, конечно HTML код самого ролика. Для тех, кто пока не знает где его брать предлагаю посмотреть скриншот.


При таком варианте установки, о котором пойдёт речь, мы экономим место на странице сообщения. Смотрится это достаточно необычно, не раздражает читателей. К тому же если посетитель заинтересовался информацией, ему просто нужно нажать на миниатюру  и сразу появится окно видео с воспроизведением. При необходимости есть кнопка закрыть это всплывающее окно.


как установить ролик в сооющении
В качестве примера я выбрала мультик. И чтобы воочию увидеть о чём это я всё здесь рассказываю, жмём на эту маленькую картинку и вспомним хорошо забытое старое.
Вспомнили? Сейчас сворачивайте окно внизу слева.

И  самое время разобрать по полочкам весь процесс установки. 

Как установить код просмотра видео с  Youtube.

Предложенный ниже код устанавливайте без изменений непосредственно в редакторе сообщения в режиме HTML. Подробнее об этом читайте здесь. Или в гаджет.

<script type="text/javascript">
function getposOffset(overlay,offsettype){var totaloffset=(offsettype=="left")?overlay.offsetLeft:overlay.offsetTop;var parentEl=overlay.offsetParent;while(parentEl!=null){totaloffset=(offsettype=="left")?totaloffset+parentEl.offsetLeft:totaloffset+parentEl.offsetTop;parentEl=parentEl.offsetParent;}
return totaloffset;}
function overlay(curobj,subobj){if(document.getElementById){var subobj=document.getElementById(subobj)
subobj.style.left=getposOffset(curobj,"left")+"px"
subobj.style.top=getposOffset(curobj,"top")+"px"
subobj.style.display="block"
return false}
else
return true}
function overlayclose(subobj){document.getElementById(subobj).style.display="none"}
</script>


Следующий небольшой код для вызова всплывающего окна. Так же вставляем при написании сообщения в режиме HTML в то место, где предполагается  картинка-миниатюра.

<div><a href="=" onclick="return overlay(this, 'subcontent')"><img alt="" src=" url(адрес маленькой картинки)" height="80px " width="100px" /></a></div>


Синим цветом я выделили адрес выбранной миниатюры и красным её размеры. Можете установить свои значения.

И в самом конце сообщения, а может и сразу около миниатюры, как в моём случае, опять же в режиме HTML, вставляем вот такой код. Он позволяет открыть и просматривать наше видео.

<div id="subcontent" style="display: none;background-color: grey; width: ="avto" height="avto" margin: 120px 2px; position: absolute;">
<div   onclick="parent.location=&quot;javascript:location.reload() style=" border: HTML solid grey; >
<a href="=" onclick="overlayclose('subcontent'); return false">свернуть</a>сюда вставляем код видео</div></div>


Синим цветом выделен фон всего окна. Меняйте на своё усмотрение. Красным, естественно, HTML код ролика. Отступ от края экрана 120px и толщину рамки 2px как хотите.

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

А вариант такой, согласитесь, очень необычный. Почему бы и не воспользоваться. Сейчас ставлю точку в шпаргалке и иду смотреть мультик. Увидимся.

p.s. этот код у меня уже полгода хранился в черновике. Просьба, если вы узнаете  первоисточник, сообщите мне. Обязательно укажу ссылку.

Удачи всем нам.


Ой, а что это там ниже? Ну надо же! Нажимаем!

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

Введите Ваш email ...:


11 комментариев:

  1. Вика привет! Ты прям читаешь мысли! Вчера целый вечер проискал подобную штуку и тут утречком твой пост. Спасибо буду юзать, но сразу вопросы:
    Позиционирование окна можно сделать? Как задать отбражение поверх всего тела блога, а то у меня видео прячется под боковую панель.

    ОтветитьУдалить
  2. ой уже прочитал где настроить позиционирование. Осталось понять как открывать поверх остальных окон

    ОтветитьУдалить
    Ответы
    1. Владимир, привет. Вот тут я тебя не поняла. Поверх каких окон.

      Удалить
    2. Неправильно выразился, не окон а виджетов в боковой панели. После увеличения размеров попап окна оно прячется под эти виджеты.

      Удалить
    3. Поняла, тебе надо чтобы во весь экран. Не знаю, как Владимир. А зачем такое большое. Подгони размеры ролика в последнем коде в режиме HTML на ширину поля сообщения. Мне, кажется этого достаточно будет.

      Удалить
  3. Заманчиво и не привычно! Нужно подумать))) Для меня, как не банально это звучит процесс прописывания адреса картинки заводит в тупик. Через раз появляется изображение(

    ОтветитьУдалить
  4. Ирина, привет. Напиши мне на почту откуда ты берёшь картинки(вернее, где хранишь). А такой вариант установки видео очень хорош тогда, когда предполагается что их несколько в сообщении. Или сам текст достаточно длинный. Не прерывается вставленный, обычным способом роликом.

    ОтветитьУдалить
  5. Ответы
    1. Сергей ало того, что интересный, ещё и практичный.

      Удалить
  6. Интересно, но пока обхожусь ссылками. Мне все время хочется вставлять Комаровского, а это запрещено в youtube

    ОтветитьУдалить
  7. Олеся, Ну может быть придёт время и такое пригодится.

    ОтветитьУдалить

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