BBCode youtube в модальном окне, как на rutracker.org

Скачиваем архив:
youtube-panel.rar
31.3 КБ 342 скачивания
Распаковываем и заливаем себе на сайт/форум.

Идём в overall_header.html вставляем перед </head>

Код: Выделить всё

<script type="text/javascript" src="/jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="/youtube-panel.js"></script>
<script type="text/javascript">
  $(document).ready(function(){
    PopUp($('#yt-b'), $('#yt-link'));
  });
</script>
Не забываем изменить путь на свой.

В тему стиля добавляем:

Код: Выделить всё

/* Youtube-video 
---------------------------------------- */

#win{
     position:fixed; 
     z-index:2000; 
     top:0;
     left:0;
     background:url("/images/win.png"); 
     display:none;
     height:100%;
     width:100%;
}

#youtube-panel{
    -moz-background-clip: border, border;
    -moz-background-origin: padding, padding;
    -moz-background-size: cover;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    -moz-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 0 0 1px #FFFFFF inset;
    background-attachment: scroll, scroll;
    background-color: transparent;
    background-image: url("/images/aerobg.png");
    background-image: -moz-linear-gradient(rgba(200, 200, 200, 0.4) 0%, #FFFFFF);
    background-image: -webkit-gradient(center top, from(rgba(200, 200, 200, 0.4) 0%), to(#FFFFFF));
    background-image: -webkit-linear-gradient(rgba(200, 200, 200, 0.4) 0%, #FFFFFF);
    background-image: -o-linear-gradient(rgba(200, 200, 200, 0.4) 0%, #FFFFFF);
    background-image: -ms-linear-gradient(rgba(200, 200, 200, 0.4) 0%, #FFFFFF);
    background-image: linear-gradient(rgba(200, 200, 200, 0.4) 0%, #FFFFFF);
    background-position: 0 0%, 0 0;
    background-repeat: repeat, repeat;
    border: 1px solid black;
    margin: 1px;
    height: 420px;
    width: 650px;
    overflow: hidden;
    position: fixed;
    z-index: 200;
}

#close{
    display:block; 
    float:right; 
    width:15px; 
    height:15px; 
    background:url("/images/close.gif") no-repeat; 
    cursor:pointer;
    position:absolute;
    top:4px;
    right:4px;
}

#name {
    color: #000000;
    float: left;
    font: bold 13px Arial,Helvetica;
    left: 5px;
    position: absolute;
    top: 5px;
}

#yt-b{
    display: none;
}

.sample{
    padding: 25px 5px 5px 5px;
}

span.youtube-video{
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    background-color: gray;
    border: 1px solid #333333;
    display: inline-block;
    font: bold 13px Arial,Helvetica;
    margin: 1px 2px -6px;
    padding: 2px 2px 2px 5px;
    color: white;
}

span.youtube-video-here{
    -moz-border-radius: 0 3px 3px 0;
    -webkit-border-radius: 0 3px 3px 0;
    border-radius: 0 3px 3px 0;
    background-color: #008500;
    border: 1px solid #333333;
    color: white;
    display: inline-block;
    float: right;
    margin: -3px -3px -3px 4px;
    padding: 2px 4px;
}

span.youtube-video a.postLink {
    color: white;
    float: left;
    text-decoration: none;
}

span.youtube-video a:link{
    color: white;
    text-decoration: none;
}
Пути к картинкам также изменяем на свои.


Создаём новый bbcode - youtube

Использование BBCode

Код: Выделить всё

[youtube]{TEXT}/watch?v={SIMPLETEXT}[/youtube]
Замена HTML

Код: Выделить всё

<span class="youtube-video">
<span class="youtube-video-here"  title="Начать проигрывание на текущей странице"><a id="yt-link" href="javascript:void(0);">&#9658;</a></span>
<a class="postLink" href="{TEXT}/watch?v={SIMPLETEXT}" target="_blank" title="Перейти для просмотра на youtube.com">{TEXT}/watch?v={SIMPLETEXT}</a>
</span>

<div id="yt-b"><div id="name">{TEXT}/watch?v={SIMPLETEXT}</div><div class="sample"><object style="height: 390px; width: 640px"><param name="movie" value="{TEXT}/v/{SIMPLETEXT}?version=3"><param name="allowFullScreen" value="true"><param name="allowScriptAccess" value="always"><embed src="{TEXT}/v/{SIMPLETEXT}?version=3" type="application/x-shockwave-flash" allowfullscreen="true" allowScriptAccess="always" width="640" height="390"></object></div></div>
Замена HTML с неактивным названием, без перехода на youtube.com

Код: Выделить всё

<span class="youtube-video">
<span class="youtube-video-here" title="Начать проигрывание на текущей странице"><a id="yt-link" href="javascript:void(0);" title="Начать проигрывание на текущей странице">&#9658;</a></span>
{TEXT}/watch?v={SIMPLETEXT}
</span>

<div id="yt-b"><div id="name">{TEXT}/watch?v={SIMPLETEXT}</div><div class="sample"><object style="height: 390px; width: 640px"><param name="movie" value="{TEXT}/v/{SIMPLETEXT}?version=3"><param name="allowFullScreen" value="true"><param name="allowScriptAccess" value="always"><embed src="{TEXT}/v/{SIMPLETEXT}?version=3" type="application/x-shockwave-flash" allowfullscreen="true" allowScriptAccess="always" width="640" height="390"></object></div></div>
Пример:
buUWtYbmyzg: buUWtYbmyzg


Проверял в браузерах: Google Chrome, Opera и Mozilla Firefox. Корректную работу в других браузерах не гарантирую.
Комментарии: 2

dragon 11 авг 2012, 17:52 Сообщение

Вроде делаю как надо но при нажатии на начать просмотр на текущей странице нечего не работает
  • 0

CabinetAdmin 11 авг 2012, 20:40 Сообщение

Значит, что-то всё таки не так.
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

Похожие темы