» »

Вид материалов как в YouTube на модуль Видео

Вид материалов как в YouTube на модуль Видео

Красивый вид материалов как на сайте YouTube, для модуля Видео в uCoz. Что после установки у вас будет свой оригинальный дизайн на этом модуле. Было решено сделать, что-то красивое, но зачем далеко ходить если уже есть красивый вид материалов, например в YouTube. Теперь вы можете изменить и настроить как вы сами видите на своем интернет ресурсе.
Вот так выглядит материал после установки:

В виде материалов автоматически убираются первые не используемые нули.
И так же кол-во просмотров правильно склоняется.
0 просмотров
2 просмотра
101 просмотр и т.д.
Установка:
В настройке модуля видео
Количество колонок для видеоматериалов: 1
Количество колонок для каналов: 1.
CSS:
Код
/*video*/
.vidos {width:190px;overflow:hidden;height:105px;position:relative;}
.uEntryWrap {display:inline-block;padding: 2px 8px 0 0 !important;vertical-align:top;}
#uEntriesList {padding: 0 0 0 7px !important;}
.entryBlock {width:190px;font-family: 'Roboto', sans-serif;}
.vtitle {max-height:30px;overflow:hidden;font-weight:500;}
.entryBlock span {font-size:12px;color:#999;}

В вид материалов:
Код
<a href="$ENTRY_URL$"><div class="vidos" style="background:url('$IMG_SMALL_URL1$') center no-repeat;background-size:190px;">
<span style="position:absolute;bottom:5px;right:5px;background:rgba(0, 0, 0, 0.5);color:#fff;font-size:11px;padding:2px 5px;">
<?if($DURATION$>='00:00:00' & $DURATION$<='00:09:59')?><?substr($DURATION$,4)?><?else?><?if($DURATION$>='00:10:00' & $DURATION$<='00 <img rel="usm" src="/sml/59.gif" border="0" align="absmiddle" alt="59" /> 59')?><?substr($DURATION$,3)?><?else?><?if($DURATION$>='01:00:00' & $DURATION$<='09 <img rel="usm" src="/sml/59.gif" border="0" align="absmiddle" alt="59" /> 59')?><?substr($DURATION$,1)?><?else?>$DURATION$<?endif?><?endif?><?endif?>
</span>
</div>
</a>
<div class="vtitle">
<a href="$ENTRY_URL$">$TITLE$</a>
</div>
<span style="padding-right:3px;">$PLAYS$ просмотр<?if($PLAYS$%10!=1||$PLAYS$%100=11)?><?if($PLAYS$%10>=2&&$PLAYS$%10<=4&&($PLAYS$%100<10||$PLAYS$%100>=20))?>а<?else?>ов<?endif?><?endif?></span>
<span style="padding-left:5px;border-left:1px dotted #ccc;">$ADDENTRY_DATE$</span>

На главную страницу, страницу категорий и разделов:
Перед закрывающемся /head
Код
<link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700" rel="stylesheet">

Это шрифт который использует Ютуб.
Ещё обращу внимания, что цвет ссылок, это стандартный который используется на вашем сайте, если нужен как на скриншоте, то в css добавьте:
Код
a:link, a:visited {text-decoration: none; color: #638195;}
a:hover, a:active {text-decoration: none; color: #4a5c69;}
2016-12-04 Просмотров: 1417 Комментарий: (14)

Поделиться в социальных сетях

Материал разместил

Комментарий: 14
Kosten
Kosten 2016-12-04 18:271
0
Круто смотрится, и время выводит, реально как на ютуб.
Сафрон
Сафрон 2016-12-04 19:552
0
Так то вид материала на ucoz смотрится нормально, но и этот уже привычно наблюдать.
FeStemBer
FeStemBer 2016-12-04 19:583
0
Так вообще можно переделать и видео, хотя также считаю, что вид там как раз сделан лучше основного, что есть на сайте, здесь на любителя. Но вот фотографий, это другое дела, там можно листать, что не предусмотрено по умолчанию.
Kolinkor
Kolinkor 2016-12-04 20:034
0
А шире можно сделать, здесь показано в 4 колонки, в 3 сделать, просто понятнее будет.
Kosten
Kosten 2016-12-04 20:345
0
В стилях можно сделать шире и на 3 колонки, как вижу в начале, должны эти стили width:190px;overflow:hidden;height:105px отвечать. Так это нормально по ширине.
Alexandrhhh
Alexandrhhh 2016-12-04 21:476
0
верно, но ещё в виде материалов надо поменять background-size:190px;
dizel0057
dizel0057 2016-12-05 11:447
0
У меня время не показывает почему то.
Kolinkor
Kolinkor 2016-12-05 16:328
0
Можно сайт, так посмотреть как смотрится на сайте.
Kosten
Kosten 2016-12-05 17:5110
0
Здесь видно, что темно прозрачный фон есть, а время ролика не показывает, здесь не знаю, только у автора как писал нужно спрашивать.

Kosten
Kosten 2016-12-05 17:169
0
Спросите у Alexandrhhh, он как видно устанавливал на сайт и все про этот материал отлично знает.
Alexandrhhh
Alexandrhhh 2016-12-05 23:2311
0
Помог)
Kosten
Kosten 2016-12-06 00:0012
0
Ну и отлично, теперь как видно все выводит, реально как на ютую.

avatar
otgamera 2018-05-10 20:5313
0
а как адаптировать????
если его адаптировать полностью - цены ему не будет
Kosten
Kosten 2018-05-10 21:2514
0
Если, что то можете в этом материале узнать, как нужно выставить адаптивность, все на форуме написано.
avatar