Разделы
Теги | RSS © 2008 – 2017
Контакты
email: igor@veselov.sumy.ua
skype: utz0r2

Валидный Youtube в DLE


Ранее в посте Пропорциональное масштабируемое видео и валидный youtube я привел код как выглядит валидный код ютуб плеера который отображается во всех браузерах.

Теперь пойдет о мини хаке для ДЛЕ.

Откройте \engine\classes\parse.class.php на строчке где-то 540-овой найдите:
return '<!--dle_youtube_begin:'.$url.'--><object width="'.$this->video_config['width'].'" height="'.$this->video_config['height'].'"><param name="movie" value="http://www.youtube.com/v/'.$video_link.'&hl=ru&fs=1"></param><param name="wmode" value="transparent" /><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/'.$video_link.'&hl=ru&fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" wmode="transparent" width="'.$this->video_config['width'].'" height="'.$this->video_config['height'].'"></embed></object><!--dle_youtube_end-->';

и замените на
return '<!--dle_youtube_begin:'.$url.'--><!--[if IE]><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="'.$this->video_config['width'].'" height="'.$this->video_config['height'].'"><param name="movie" value="http://www.youtube.com/v/'.$video_link.'&amp;hl=ru&amp;fs=1"></param><![endif]--><!--[if !IE]>--><object type="application/x-shockwave-flash" data="http://www.youtube.com/v/'.$video_link.'&amp;hl=ru&amp;fs=1" width="'.$this->video_config['width'].'" height="'.$this->video_config['height'].'"><!--<![endif]--><param name="wmode" value="transparent" /><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param></object><!--dle_youtube_end-->';

Теперь последующее новое видео с ютуба будет отображаться валидно!

Заказчик-исполнитель, жизненно!


Пропорциональное масштабируемое видео и валидный youtube


Пропорциональное масштабируемое реализовано за счет позиционирования блоков и процентных соотношений. Применимо на резиновых сайтах.
CSS
#containingBlock {
  width:50%;
}
.videoWrapper {
  position: relative;
  padding-bottom:56.25%;
  padding-top:25px;
  height:0;
  overflow:hidden;
}
.videoWrapper div,
.videoWrapper object {
  position:absolute;
  top:0;
  left:0;
  width: 100%;
  height:100%;
}

Код видео с ютуба по умолчанию не валидный, здесь же он добавлен в соответствии стандартам

HTML
<div id="containingBlock">
  <div class="videoWrapper">
    <div>
      <!--[if IE]>
      <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="480" height="295">
        <param name="movie" value="http://www.youtube.com/v/mDRYnaajUcY&amp;hl=en&amp;fs=1&amp;showinfo=0" />
      <![endif]-->
      <!--[if !IE]>-->
      <object type="application/x-shockwave-flash" data="http://www.youtube.com/v/mDRYnaajUcY&amp;hl=en&amp;fs=1&amp;showinfo=0" width="480" height="295">
      <!--<![endif]-->
        <param name="quality" value="high" />
        <param name="wmode" value="opaque" />
        <p><a href="http://www.adobe.com/go/getflashplayer"><img alt="Get Adobe Flash player" src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif"/></a></p>
      </object>
    </div>
    <p>Following is the description of the video embeded in this document</p>
    <p>This short clip is about YouTube widescreen formatting. It shows the two main formats (16:9, 4:3) and also explains the best way to create a Flash movie according to the new widescreen format.</p>
  </div>
  ...
</div>

Очень мне нравится девочка с видео демки -)

ДЕМО: http://veselov.sumy.ua/uploads/files/demo/003/index.html

css map и jquery notes


Более продвинутая реализация Image Map. Суть работы та же как и в предыдущем примере. Описывать метод не буду, проще посмотреть демку http://veselov.sumy.ua/uploads/files/demo/002/index.html

css map и jquery notes

Но самая классная как по мне реализация это jquery notes. Красиво юзабельно, но яваскрипт тяжел.
demo: http://jquery-notes.rydygel.de/samples.php

Image Maps c помощью спрайта


Это один из простейших способов построения карты.

Заключается в смене позиционирования бекграунда при наведении на определенную зону картинки.
Недостаток большая картинка и неюзабильно.

Image Maps c помощью спрайта


CSS:
dd#monitorDef{ top: 65px; left: 114px; }
dd#monitorDef a{ position: absolute; width: 73px; height: 69px; text-decoration: none; }
dd#monitorDef a span{ display: none; }
dd#monitorDef a:hover{ position: absolute; background: transparent url(office.jpg) -109px -317px no-repeat; top: -10px; left: -5px; }

dd#monitorDef a:hover span{
display: block;
text-indent: 0;
vertical-align: top;
color: #000;
background-color: #F4F4F4;
font-weight: bold;
position: absolute;
border: 1px solid #BCBCBC;
bottom: 100%;
margin: 0;
padding: 5px;
width: 250%;
}


HTML:
<dl id="officeMap">
<dt id="monitor">1. Monitor</dt>
<dd id="monitorDef"><a href="#"><span>Here's my 17" Monitor.  I wish I had an LCD!</span></a></dd>
<dt id="phone">2. Phone</dt>
<dd id="phoneDef"><a href="#"><span>Does this thing ever stop ringing?</span></a></dd>
<dt id="case">3. PC Case</dt>
<dd id="caseDef"><a href="#"><span>This is my crazy Linux box! Gotta love that Linux...</span></a></dd>
<dt id="notebook">4. IBM ThinkPad</dt>
<dd id="notebookDef"><a href="#"><span>Here's my Linux notebook.  Some crazy coding going on.</span></a></dd>
<dt id="floppy">5. External Floppy Drive</dt>
<dd id="floppyDef"><a href="#"><span>Floppy Drive.  Ancient... I know!</span></a></dd>
</dl>


DEMO: http://veselov.sumy.ua/uploads/files/demo/001/index.html

Желание верить -(


Люди испытывают сильнейшее желание во что-нибудь верить. Желания часто порождают парадокс: чем больше вы за чем-нибудь гоняетесь, тем труднее оно дается в руки, ускользая; чем больше интереса вы выказываете к объекту желаний, тем сильнее он отталкивает от себя.

Задумайтесь, как бы вы себя начали вести, если бы узнали, что осталось жить 1 месяц…
«»
Вверх