Хочу предложить вам интересное решение для установки видео с Youtube или любого другого видеохостинга в сообщение блога. Сейчас видио-ролики являются очень мощным инструментом, чтобы более наглядно и в полной мере донести ту или иную информацию.
Или иногда просто хочется поделиться с друзьями на странице блога своим видео о праздновании днюхи, своём отпуске или о проделках любимого чада.
Нажмите на миниатюру для просмотра.
Для начала нам необходимо подобрать картинку, которая будет соответствовать информации видео. А может быть, даже просто красивая кнопка с предложением посмотреть ролик. Желательно не очень большого размера. И, конечно HTML код самого ролика. Для тех, кто пока не знает где его брать предлагаю посмотреть скриншот.
При таком варианте установки, о котором пойдёт речь, мы экономим место на странице сообщения. Смотрится это достаточно необычно, не раздражает читателей. К тому же если посетитель заинтересовался информацией, ему просто нужно нажать на миниатюру и сразу появится окно видео с воспроизведением. При необходимости есть кнопка закрыть это всплывающее окно.
В качестве примера я выбрала мультик. И чтобы воочию увидеть о чём это я всё здесь рассказываю, жмём на эту маленькую картинку и вспомним хорошо забытое старое.
Вспомнили? Сейчас сворачивайте окно внизу слева.
Как установить код просмотра видео с Youtube.
Предложенный ниже код устанавливайте без изменений непосредственно в редакторе сообщения в режиме HTML. Подробнее об этом читайте здесь. Или в гаджет.
Следующий небольшой код для вызова всплывающего окна. Так же вставляем при написании сообщения в режиме HTML в то место, где предполагается картинка-миниатюра.
Синим цветом я выделили адрес выбранной миниатюры и красным её размеры. Можете установить свои значения.
И в самом конце сообщения, а может и сразу около миниатюры, как в моём случае, опять же в режиме HTML, вставляем вот такой код. Он позволяет открыть и просматривать наше видео.
Синим цветом выделен фон всего окна. Меняйте на своё усмотрение. Красным, естественно, HTML код ролика. Отступ от края экрана 120px и толщину рамки 2px как хотите. В целом код так будет выглядеть
В последнем коде можно вставить и просто картинку. Только, чтобы по размеру не была шире поля сообщения. Думаю, что и цитату и текст таким же образом можно отобразить. Проявите свою фантазию. Пробуйте. Опять же скажу, это только кажется, что всё слишком мудрёно написано. А стоит взяться и всё получается.
А вариант такой, согласитесь, очень необычный. Почему бы и не воспользоваться. Сейчас ставлю точку в шпаргалке и иду смотреть мультик. Увидимся.
Или иногда просто хочется поделиться с друзьями на странице блога своим видео о праздновании днюхи, своём отпуске или о проделках любимого чада.
Нажмите на миниатюру для просмотра.
Для начала нам необходимо подобрать картинку, которая будет соответствовать информации видео. А может быть, даже просто красивая кнопка с предложением посмотреть ролик. Желательно не очень большого размера. И, конечно 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>
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="javascript:location.reload() style=" border: HTML solid grey; >
<a href="=" onclick="overlayclose('subcontent'); return false">свернуть</a>сюда вставляем код видео</div></div>
<div onclick="parent.location="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="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>
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="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>
В последнем коде можно вставить и просто картинку. Только, чтобы по размеру не была шире поля сообщения. Думаю, что и цитату и текст таким же образом можно отобразить. Проявите свою фантазию. Пробуйте. Опять же скажу, это только кажется, что всё слишком мудрёно написано. А стоит взяться и всё получается.
А вариант такой, согласитесь, очень необычный. Почему бы и не воспользоваться. Сейчас ставлю точку в шпаргалке и иду смотреть мультик. Увидимся.
оформите подписку на новые шпаргалки
Вика привет! Ты прям читаешь мысли! Вчера целый вечер проискал подобную штуку и тут утречком твой пост. Спасибо буду юзать, но сразу вопросы:
ОтветитьУдалитьПозиционирование окна можно сделать? Как задать отбражение поверх всего тела блога, а то у меня видео прячется под боковую панель.
ой уже прочитал где настроить позиционирование. Осталось понять как открывать поверх остальных окон
ОтветитьУдалитьВладимир, привет. Вот тут я тебя не поняла. Поверх каких окон.
УдалитьНеправильно выразился, не окон а виджетов в боковой панели. После увеличения размеров попап окна оно прячется под эти виджеты.
УдалитьПоняла, тебе надо чтобы во весь экран. Не знаю, как Владимир. А зачем такое большое. Подгони размеры ролика в последнем коде в режиме HTML на ширину поля сообщения. Мне, кажется этого достаточно будет.
УдалитьЗаманчиво и не привычно! Нужно подумать))) Для меня, как не банально это звучит процесс прописывания адреса картинки заводит в тупик. Через раз появляется изображение(
ОтветитьУдалитьИрина, привет. Напиши мне на почту откуда ты берёшь картинки(вернее, где хранишь). А такой вариант установки видео очень хорош тогда, когда предполагается что их несколько в сообщении. Или сам текст достаточно длинный. Не прерывается вставленный, обычным способом роликом.
ОтветитьУдалитьИнтересный вариант.
ОтветитьУдалитьСергей ало того, что интересный, ещё и практичный.
УдалитьИнтересно, но пока обхожусь ссылками. Мне все время хочется вставлять Комаровского, а это запрещено в youtube
ОтветитьУдалитьОлеся, Ну может быть придёт время и такое пригодится.
ОтветитьУдалитьвсё получилось легко и просто.Очень удобно и необычно.Большое спасибо.
ОтветитьУдалитьПосмотрела, да получилось хорошо.
ОтветитьУдалить