129 lines
4.6 KiB
Plaintext
129 lines
4.6 KiB
Plaintext
<div class="w-video_data video_data-widget-3">
|
|
<h3 class="widget-title"><span>{{widget-title}}</span></h3>
|
|
<div class="btnwrapper" style="position: absolute;top: 50%;width:100%; z-index: 101;">
|
|
<button id="prev-{{subpart-id}}" class="btn-left" title = "<%= (I18n.locale.to_s =="zh_tw") ? "上一張" : "prev" %>" style="float: left;height: 2.5em; width: 2.5em;background: border: 0;background-size: contain;position: absolute;transition:.3s; left: 0.6%;
|
|
color: #909090;
|
|
background: #fff;
|
|
border-radius: 50%;
|
|
border: none; z-index: 2;"><i class="fa fa-angle-left prev-button" aria-hidden="true" style="font-size: 1.5rem;"></i><span style="display: none;"><%= (I18n.locale.to_s =="zh_tw") ? "上一張" : "prev" %></span></button>
|
|
<button id="next-{{subpart-id}}" class="btn-right" title = "<%= (I18n.locale.to_s =="zh_tw") ? "下一張" : "next" %>" style="float: right;;height: 2.5em; width: 2.5em;background-size: contain;border: 0;position: absolute;transition:.3s;right: 0.6%;
|
|
color: #909090;
|
|
background: #fff;
|
|
border-radius: 50%;
|
|
border: none; z-index: 2;"><i class="fa fa-angle-right next-button" aria-hidden="true" style="font-size: 1.5rem;"></i><span style="display: none;"><%= (I18n.locale.to_s =="zh_tw") ? "下一張" : "next" %></span></button>
|
|
</div>
|
|
<ul class="video_data_wrap col-sm-12 cycle-slideshow" data-list="videos" data-level="0" data-cycle-fx="carousel"
|
|
data-cycle-timeout="0"
|
|
data-cycle-carousel-visible="3"
|
|
data-cycle-carousel-fluid="true"
|
|
data-cycle-next="#next-{{subpart-id}}"
|
|
data-cycle-prev="#prev-{{subpart-id}}"
|
|
data-cycle-slides=".video_data"
|
|
>
|
|
<li class="video_data col-xs-12 col-sm-4" data-video-url="{{video_url}}" data-video-webm-url="{{video_webm_url}}" data-type="{{video_type}}" >
|
|
<a href="{{video_show_url}}" title="{{video_title_escape}}">
|
|
<div class="video_linkwrapper3">
|
|
<div class="videohover">
|
|
<div class="view_info">
|
|
<span>{{view_count}}</span>
|
|
</div>
|
|
<div class="Video__Player"><button class="Video__PlayerButton"></button></div>
|
|
<div class="videoduration"></div>
|
|
</div>
|
|
<img class="video_snapshot" src="{{snapshot_url}}"/>
|
|
</div>
|
|
</a>
|
|
|
|
<div class="video_info">
|
|
<div class="video_length">{{video_duration}}</div>
|
|
<div data-list="video_tags" data-level="1" class="video_tag"><div class="video_tags2">{{video_tag}}</div></div>
|
|
<div class="video_keyword">{{video_keyword}}</div>
|
|
<div class="video_group_time">{{video_postdate}}</div>
|
|
<div class="video_title"><a class="video_link" href="{{video_show_url}}" title="{{video_title_escape}}"><h5>{{video_title}}</h5></a></div>
|
|
<div class="video_desc"><a class="video_link" href="{{video_show_url}}" title="{{video_title_escape}}">{{video_desc}}</a></div>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
<div class="clearfix"></div>
|
|
<style>
|
|
|
|
.video_title h5{
|
|
@extend .i-title;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
.view_info{
|
|
float: right;
|
|
}
|
|
.view_info img{
|
|
margin-right: 5px;
|
|
}
|
|
.Video__Player{
|
|
display: flex;
|
|
-webkit-box-align: center;
|
|
align-items: center;
|
|
-webkit-box-pack: center;
|
|
justify-content: center;
|
|
width: 100%;
|
|
height: 100%;
|
|
.Video__PlayerButton{
|
|
display: inline-block;
|
|
padding-bottom: 0px;
|
|
padding-top: 0px;
|
|
border-radius: 50%;
|
|
border: 0px;
|
|
background-color: rgb(255, 81, 0);
|
|
background: url(/assets/btn-play.svg) no-repeat;
|
|
background-size: 100%;
|
|
background-repeat: no-repeat;
|
|
background-position: center center;
|
|
transition: 0.5s;
|
|
width: 60px;
|
|
height: 60px;
|
|
&:hover{
|
|
width: 80px;
|
|
height: 80px;
|
|
}
|
|
}
|
|
}
|
|
.view_info{
|
|
max-height: 100%;
|
|
border-radius: 2px;
|
|
font-size: 0.875rem;
|
|
font-weight: normal;
|
|
letter-spacing: 0.3px;
|
|
text-align: center;
|
|
display: flex;
|
|
-webkit-box-align: center;
|
|
align-items: center;
|
|
position: absolute;
|
|
padding: 0px 8px;
|
|
background-color: #000000cc;
|
|
color: rgb(255, 255, 255);
|
|
z-index: 10;
|
|
top: 10px;
|
|
left: 10px;
|
|
border: 1px solid transparent;
|
|
line-height: 1.45;
|
|
span{
|
|
color:#fff;
|
|
}
|
|
&:before{
|
|
content: "";
|
|
display: inline-block;
|
|
margin-right: 5px;
|
|
width: 14px;
|
|
height: 10px;
|
|
background: url(/assets/icon-view@2x.png) no-repeat;
|
|
position: relative;
|
|
background-size: contain;
|
|
}
|
|
}
|
|
</style>
|
|
</div>
|
|
<script>
|
|
|
|
</script> |