Объявление
Уважаемые читатели, друзья, подписчики. В связи с участившимся и, порядком надоевшим спамом в комментариях от всяких анонимах(будь они не ладны), я вынуждена включить модерацию комментариев на некоторое время. Очень надеюсь на ваше понимание.

Как оригинально вставить видео с 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 как хотите. В целом код так будет выглядеть

<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>

<br />
<div>
<a href="https://draft.blogger.com/=" onclick="return overlay(this, 'subcontent')"><img alt="" src="http://img.youtube.com/vi/P1KT_I1LmtA/mqdefault.jpg " height="80px " width="100px" /></a></div>
<div 120px="" 2px="" absolute="" avto="" height="avto" id="subcontent" margin:="" position:="" style="background-color: grey; display: none;">
<div border:="" grey="" html="" onclick="parent.location=&quot;javascript:location.reload() style=" solid="">
<a href="https://draft.blogger.com/=" onclick="overlayclose('subcontent'); return false">свернуть</a><iframe allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" frameborder="0" height="315" src="https://www.youtube.com/embed/P1KT_I1LmtA" width="560"></iframe></div>
</div>


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

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





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

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


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

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

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

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

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

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

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

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

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

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

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

    ОтветитьУдалить
  8. всё получилось легко и просто.Очень удобно и необычно.Большое спасибо.

    ОтветитьУдалить
  9. Посмотрела, да получилось хорошо.

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

ВСЕГДА РАДА УСЛЫШАТЬ ВАШЕ МНЕНИЕ!
Ели у вас возникла необходимость опубликовать код в комментарии, то воспользуйтесь encoder HTML