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

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

свернуть

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

свернуть http://img.youtube.com/vi/ fBrsNVtpQoYs/mqdefault.jpg

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

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

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

Как установить код просмотра видео с  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 ...: