75 lines
2.6 KiB
Plaintext
75 lines
2.6 KiB
Plaintext
|
<div class="i-video_data video_data-index-3 video_data-modal-view">
|
||
|
|
<div class="modal" tabindex="-1" role="dialog">
|
||
|
|
<div class="modal-dialog" role="document">
|
||
|
|
<div class="modal-content">
|
||
|
|
<div class="modal-header">
|
||
|
|
<button type="button" title="<%= I18n.t(:close) %>" class="close" data-dismiss="modal" aria-label="Close">
|
||
|
|
<span aria-hidden="true">×</span>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
<div class="modal-body video_goes_here">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<h3 class="i-annc__page-title">{{page-title}}</h3>
|
||
|
|
<ul class="video_data_wrap col-sm-12" data-list="videos" data-level="0">
|
||
|
|
<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 class="video_link" href="javascript:void(0)" title="{{video_title_escape}}" data-api-url="{{api_url}}">
|
||
|
|
<div class="video_snapshot_wrap">
|
||
|
|
<img class="video_snapshot" src="{{snapshot_url}}"/>
|
||
|
|
<img src="/assets/video_pro/btn-play.png" alt="" class="play_icon">
|
||
|
|
</div>
|
||
|
|
<div class="video_info">
|
||
|
|
<div class="video_time"><span date-format="%Y/%m/%d">{{video_postdate}}</span></div>
|
||
|
|
<div class="video_title"><h4>{{video_title}}</h4></div>
|
||
|
|
<div class="video_desc">{{video_desc}}</div>
|
||
|
|
</div>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
<div class="clearfix"></div>
|
||
|
|
<style>
|
||
|
|
.video_data_wrap{
|
||
|
|
display: flex;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
}
|
||
|
|
.video_title h4{
|
||
|
|
font-size: 1.1em;
|
||
|
|
font-weight: bold;
|
||
|
|
margin-bottom: 0;
|
||
|
|
text-overflow: ellipsis;
|
||
|
|
overflow: hidden;
|
||
|
|
white-space: nowrap;
|
||
|
|
}
|
||
|
|
.video_snapshot_wrap {
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
.video_data-modal-view .modal-dialog {
|
||
|
|
width: 80%;
|
||
|
|
}
|
||
|
|
.video_data-modal-view .play_icon {
|
||
|
|
position: absolute;
|
||
|
|
top: 50%;
|
||
|
|
left: 50%;
|
||
|
|
-webkit-transform: translateX(-50%) translateY(-50%);
|
||
|
|
-moz-transform: translateX(-50%) translateY(-50%);
|
||
|
|
transform: translateX(-50%) translateY(-50%);
|
||
|
|
width: 55px;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
<script>
|
||
|
|
$(".video_data-modal-view .video_link").off('click').on('click', function(){
|
||
|
|
var _this = $(this);
|
||
|
|
var modal_window = _this.parents('.video_data-modal-view').find('.modal');
|
||
|
|
if(modal_window.length != 0){
|
||
|
|
var api_url = _this.data('api-url');
|
||
|
|
$.get(api_url).done(function(html){
|
||
|
|
modal_window.find('.video_goes_here').html(html);
|
||
|
|
modal_window.modal('show');
|
||
|
|
})
|
||
|
|
}
|
||
|
|
})
|
||
|
|
</script>
|
||
|
|
</div>
|
||
|
|
{{pagination_goes_here}}
|