Всплывающие окно для видео.

pop-ap okno

Установка кода видео с любых видеохостингов с воспроизведением во всплывающем окне, без перезагрузки страницы, по клику на миниатюру изображения.Элегантный вывод показа видеороликов на страницах сайта или блога.Как установить видео на страницу и не испортив дизайн и сэкономив место на странице можно посмотреть на примере расположенном ниже.




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

Установка кода для просмотра видео.


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

<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>
Следующий шаг это код вызова всплывающего окна.Так как в окне будет размещён видеоролик,то логично,что картинка миниатюра будет наиболее уместна в данном случае.

<a href="=" onclick="return overlay(this, 'subcontent')"><img alt="" src="ссылка на изображение" width="100px" />
Необходимо будет вставить картинку в нужное нам место или уже окружить существующую в записи этим кодом.Дальше,где нибудь в самом конце добавим контейнер с видео-кодом полученным на любом видео хостинге или же можно вставить фото или любой другой текст или код.


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

Смотреть ещё

Слайдер- ротатор для блогаРотатор для баннеровЭффекты для фото на CSS.Как добавить форум на блогОформление блоков для кода

Настройки кода для  окна.


Настроек здесь совсем немного.Для настроек кода и подгонки под свой дизайн воспользуйтесь  онлайн редактором в визуальном режиме.


  • border: 5px solid grey; цвет и толщина рамки контейнера
  • width="100px"  размер миниатюры
  • background-color: grey; цвет окна фрейма
  • margin: 100px; позиционирование видео ролика относительно низа страницы для более комфортного отображения для посетителей при клике на миниатюру.
  • ✄ символ закрытия окна,который можно поменять на свой или же вместо него просто добавить подпись.




всплывающее окно


Отправить комментарий