102 lines
2.5 KiB
Plaintext
102 lines
2.5 KiB
Plaintext
|
<% content_for :page_specific_css do %>
|
||
|
|
<style type="text/css">
|
||
|
|
.video-thumbnail{
|
||
|
|
width : 100px;
|
||
|
|
height: 75px;
|
||
|
|
position: relative;
|
||
|
|
overflow: hidden;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
.video-thumbnail-overlay{
|
||
|
|
width: 100px;
|
||
|
|
height: 75px;
|
||
|
|
background-color:rgba(192,192,192,0.5);
|
||
|
|
position: absolute;
|
||
|
|
top : 0;
|
||
|
|
z-index: 2;
|
||
|
|
}
|
||
|
|
.video-thumbnail i{
|
||
|
|
color: #08c;
|
||
|
|
font-size: 40px;
|
||
|
|
left: 25px;
|
||
|
|
position: absolute;
|
||
|
|
top: 18px;
|
||
|
|
z-index: 3;
|
||
|
|
}
|
||
|
|
#video-preview-modal{
|
||
|
|
width: 1045px;
|
||
|
|
height: 588px;
|
||
|
|
left : 40%;
|
||
|
|
}
|
||
|
|
#video-preview-modal #video-player-for-uploaded{
|
||
|
|
height: 540px;
|
||
|
|
border : 0px none;
|
||
|
|
}
|
||
|
|
#video-preview-modal #video-youtube-player{
|
||
|
|
height: 540px;
|
||
|
|
width: 1045px;
|
||
|
|
border : 0px none;
|
||
|
|
}
|
||
|
|
#video-preview-modal .modal-body{
|
||
|
|
padding: 0px;
|
||
|
|
max-height: 570px;
|
||
|
|
text-align: center;
|
||
|
|
background-color: #000;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
<% end %>
|
||
|
|
<%= render_filter @filter_fields, "index_table" %>
|
||
|
|
<span id="index_table">
|
||
|
|
<%= render 'index'%>
|
||
|
|
</span>
|
||
|
|
|
||
|
|
<div class="modal hide fade" id="video-preview-modal">
|
||
|
|
<div class="modal-header">
|
||
|
|
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
||
|
|
<h3 id="video-label">Title</h3>
|
||
|
|
</div>
|
||
|
|
<div class="modal-body">
|
||
|
|
<iframe src="" id="video-youtube-player" class="hide" allowfullscreen></iframe>
|
||
|
|
<video id="video-player-for-uploaded" class="hide" src="" controls>
|
||
|
|
Your browser does not support the <code>video</code> element.
|
||
|
|
</video>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script type="text/javascript">
|
||
|
|
(function(){
|
||
|
|
var videoModal = $("#video-preview-modal"),
|
||
|
|
videoPlayer = document.getElementById("video-player-for-uploaded"),
|
||
|
|
youtubePlayer = $("#video-youtube-player"),
|
||
|
|
videoType = "";
|
||
|
|
$(".video-thumbnail").on("click",function(){
|
||
|
|
videoType = $(this).data("video-type");
|
||
|
|
var url = $(this).data("video-url");
|
||
|
|
if(videoType == "upload"){
|
||
|
|
videoPlayer.src = url;
|
||
|
|
$("#video-player-for-uploaded").removeClass("hide");
|
||
|
|
}else if(videoType == "youtube"){
|
||
|
|
youtubePlayer.attr("src", url + "?autoplay=1");
|
||
|
|
youtubePlayer.removeClass("hide");
|
||
|
|
}
|
||
|
|
videoModal.find("#video-label").text($(this).data("video-title"));
|
||
|
|
videoModal.modal("show");
|
||
|
|
})
|
||
|
|
videoModal.on("hidden",function(){
|
||
|
|
videoPlayer.pause();
|
||
|
|
$("#video-player-for-uploaded").addClass("hide");
|
||
|
|
youtubePlayer.addClass("hide");
|
||
|
|
youtubePlayer.attr("src","");
|
||
|
|
}).on("shown",function(){
|
||
|
|
if(videoType == "upload"){
|
||
|
|
videoPlayer.play();
|
||
|
|
}
|
||
|
|
})
|
||
|
|
})();
|
||
|
|
</script>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|