Хочу предложить вам интересное решение для установки видео с Youtube или любого другого видеохостинга в сообщение блога. Сейчас видио-ролики являются очень мощным инструментом, чтобы более наглядно и в полной мере донести ту или иную информацию.
Или иногда просто хочется поделиться с друзьями на странице блога своим видео о праздновании днюхи, своём отпуске или о проделках любимого чада.
Нажмите на миниатюру для просмотра.
Для начала нам необходимо подобрать картинку, которая будет соответствовать информации видео. А может быть, даже просто красивая кнопка с предложением посмотреть ролик. Желательно не очень большого размера. И, конечно HTML код самого ролика. Для тех, кто пока не знает где его брать предлагаю посмотреть скриншот.
При таком варианте установки, о котором пойдёт речь, мы экономим место на странице сообщения. Смотрится это достаточно необычно, не раздражает читателей. К тому же если посетитель заинтересовался информацией, ему просто нужно нажать на миниатюру и сразу появится окно видео с воспроизведением. При необходимости есть кнопка закрыть это всплывающее окно.
В качестве примера я выбрала мультик. И чтобы воочию увидеть о чём это я всё здесь рассказываю, жмём на эту маленькую картинку и вспомним хорошо забытое старое.
Вспомнили? Сейчас сворачивайте окно внизу слева.
Как установить код просмотра видео с Youtube.
Предложенный ниже код устанавливайте без изменений непосредственно в редакторе сообщения в режиме HTML. Подробнее об этом читайте здесь. Или в гаджет.
Следующий небольшой код для вызова всплывающего окна. Так же вставляем при написании сообщения в режиме HTML в то место, где предполагается картинка-миниатюра.
Синим цветом я выделили адрес выбранной миниатюры и красным её размеры. Можете установить свои значения.
И в самом конце сообщения, а может и сразу около миниатюры, как в моём случае, опять же в режиме HTML, вставляем вот такой код. Он позволяет открыть и просматривать наше видео.
Синим цветом выделен фон всего окна. Меняйте на своё усмотрение. Красным, естественно, HTML код ролика. Отступ от края экрана 120px и толщину рамки 2px как хотите. В целом код так будет выглядеть
В последнем коде можно вставить и просто картинку. Только, чтобы по размеру не была шире поля сообщения. Думаю, что и цитату и текст таким же образом можно отобразить. Проявите свою фантазию. Пробуйте. Опять же скажу, это только кажется, что всё слишком мудрёно написано. А стоит взяться и всё получается.
А вариант такой, согласитесь, очень необычный. Почему бы и не воспользоваться. Сейчас ставлю точку в шпаргалке и иду смотреть мультик. Увидимся.
Или иногда просто хочется поделиться с друзьями на странице блога своим видео о праздновании днюхи, своём отпуске или о проделках любимого чада.
Нажмите на миниатюру для просмотра.
Для начала нам необходимо подобрать картинку, которая будет соответствовать информации видео. А может быть, даже просто красивая кнопка с предложением посмотреть ролик. Желательно не очень большого размера. И, конечно HTML код самого ролика. Для тех, кто пока не знает где его брать предлагаю посмотреть скриншот.
![](http://s017.radikal.ru/i441/1412/73/bcd3a0cf0c41.png)
Вспомнили? Сейчас сворачивайте окно внизу слева.
И самое время разобрать по полочкам весь процесс установки.
Как установить код просмотра видео с 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
ОтветитьУдалитьОлеся, Ну может быть придёт время и такое пригодится.
ОтветитьУдалитьвсё получилось легко и просто.Очень удобно и необычно.Большое спасибо.
ОтветитьУдалитьПосмотрела, да получилось хорошо.
ОтветитьУдалить