» »

Вид материалов как в 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;}
04.12.2016 Просмотров: 1334 Комментарий: (14)

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

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

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

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

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