Урок 10. Добавление видео. Второй способ

В предыдущем уроке я показывала, как добавить видео в блог. В этом уроке я покажу другой способ добавления видео, более интересный, на мой взгляд. Особенно полезным будет такой способ, когда сообщение очень большое или в нем много видеозаписей. Видео будет как бы спрятано и откроется только при нажатии на картинку(в данном случае, а так это может быть и текст). Просто нажмите на маленькую картинку и увидите, как это работает.

свернуть

Чтобы сделать также, скопируйте данный код и добавьте без изменений в сообщение в режиме 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}elsereturn 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>

Следующий фрагмент кода позволяет открыть и просматривать наше видео.

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

Настройки фона, отступа и т.д. можете изменить по своему усмотрению. 
Для получения большей информации об HTML и CSS можете воспользоваться этим ресурсом.