Trang chủ
Module có hiệu ứng (Chứa JS)
Module list video
Module list video
Giá: 490.000₫
<div class="section-video">
<div class="video-big">
<div class="youtube">
<img src="https://bizweb.dktcdn.net/100/005/795/files/video1.jpg?v=1502760294193" alt="Tập 5" class="imgresponsive">
</div>
<div class="youtube-detail">
<h3>Tập 5</h3>
<div class="mask playclickyt" id="Ug7w6KzPTQc">
<a href="javascript:void(0)" class="info"><i class="fa fa-play"></i></a>
</div>
</div>
</div>
<div class="list-video">
<div id="owl-demo" class="owl-carousel owl-theme owl-loaded">
<div class="item playclickyt" id="TJGuo9t1Za4">
<div class="cover"><img src="https://bizweb.dktcdn.net/100/005/795/files/video2.jpg?v=1502760402573" alt="Tập 5" class="imgresponsive"></div>
<h3 class="limit_sapo_new2">Tập 1</h3>
</div>
<div class="item playclickyt" id="fE7Poqu0oBU">
<div class="cover"><img src="https://bizweb.dktcdn.net/100/005/795/files/video3.jpg?v=1502760402580" alt="Tập 5" class="imgresponsive"></div>
<h3 class="limit_sapo_new2">Bống Bống Bang Bang</h3>
</div>
<div class="item playclickyt" id="Svip3n23VBA">
<div class="cover"><img src="https://bizweb.dktcdn.net/100/005/795/files/video4.jpg?v=1502760402587" alt="Tập 5" class="imgresponsive"></div>
<h3 class="limit_sapo_new2">Mash up - S.T</h3>
</div>
<div class="item playclickyt" id="J8ob0B3Lvpw">
<div class="cover"><img src="https://bizweb.dktcdn.net/100/005/795/files/video5.jpg?v=1502760402593" alt="Tập 5" class="imgresponsive"></div>
<h3 class="limit_sapo_new2">Mashup - M.T.Dũng</h3>
</div>
<div class="item playclickyt" id="2_WjXdheGbI">
<div class="cover"><img src="https://bizweb.dktcdn.net/100/005/795/files/video6.jpg?v=1502760402600" alt="Tập 5" class="imgresponsive"></div>
<h3 class="limit_sapo_new2">Welcome To Burlesque</h3>
</div>
</div>
</div>
<div class="view-more">
<a href="https://www.youtube.com/channel/UCF5RuEuoGrqGtscvLGLOMew/playlists?sort=dd&view=50&shelf_id=44" target="_blank">Xem Thêm
</a>
</div>
</div>
/* ==========================================================================
Video
========================================================================== */
.section-video {
background: #23292c;
padding: 20px;
}
.section-video h2 {
text-align: center;
font-size: 40px;
text-transform: uppercase;
margin: 15px 0 65px;
color: #cacaca;
}
.video-big, .list-video {
margin: 0 auto;
position: relative;
}
.video-big h3 {
transition: opacity 0.5s 0s ease-in-out;
color: #ffffff;
position: absolute;
padding: 20px;
bottom: 0;
font-size: 22px;
margin: 0;
text-transform: uppercase;
}
.mask {
background: rgba(0,0,0,0.2);
box-sizing: border-box;
transition: all 0.4s ease-in-out;
width: 100%;
height: 100%;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
}
.mask .info {
line-height: 60px;
width: 65px;
height: 65px;
padding-left: 5px;
display: block;
background: rgba(0,0,0,0.5);
border: 2px solid #b7b7b7;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
transition: all 0.5s ease;
text-align: center;
color: #fff;
position: absolute;
left: 50%;
top: 50%;
transform: translateY(-50%) translateX(-50%);
webkit-transform: translateY(-50%) translateX(-50%);
font-size: 25px;padding-top:18px;
}
.mask .info:hover {
background: rgba(255, 0, 0, 0.7);
}
.list-video {
margin-top: 10px;
}
.list-video .item {
cursor: pointer;
-webkit-transition: all 200ms ease-out;
-moz-transition: all 200ms ease-out;
-o-transition: all 200ms ease-out;
transition: all 200ms ease-out;
}
.limit_sapo_new2, .limit_sapo_new3, .limit_sapo_new4 {
-webkit-box-orient: vertical;
text-overflow: ellipsis;
display: -webkit-box;
overflow: hidden;
}
.list-video h3 {
transition: opacity 0.5s 0s ease-in-out;
color: #ffffff;
font-size: 12px;
text-transform: uppercase;
margin-top: 10px;
line-height: 16px;
}
.view-more {
text-align: center;
margin-top: 50px;
}
.view-more a {
padding: 4px 40px 3px;
color: #ffffff;
font-size: 18px;
border: 2px solid #ff0000;
border-radius: 25px;
text-transform: uppercase;
display: inline-block;
}
.view-more a:hover {
background: #ff0000;
color: #FFFFFF;
}
$("#owl-demo").owlCarousel({
loop:true,
margin:10,
nav:false,
autoplay:true,
lazyLoad: true,
smartSpeed: 500,
autoplayTimeout:1500,
responsive:{
0: {items:2},
600: {items:3},
1000: {items:4}
}
});
$(".playclickyt").each(function() {
$(document).delegate('#'+this.id, 'click', function() {
// Create an iFrame with autoplay set to true
var iframe_url = "https://www.youtube.com/embed/" + this.id + "?autoplay=1&autohide=1";
if ($(this).data('params')) iframe_url+='&'+$(this).data('params');
var vheight = $('.video-big').height();
// The height and width of the iFrame should be the same as parent
var iframe = $('<iframe/>', {'frameborder': '0', 'src': iframe_url, 'width': ($('.youtube').width()-1), 'height': vheight })
// Replace the YouTube thumbnail with YouTube HTML5 Player
$('.youtube').html(iframe);
$('.youtube-detail').hide();
$('.video-list div.item').removeClass('active');
$('#'+this.id).addClass('active');
});
});
var tag = document.createElement('script');
tag.src = 'https://www.youtube.com/player_api';
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var tv,playerDefaults = {
autoplay: 0,
autohide: 1,
modestbranding: 0,
rel: 0,
showinfo: 0,
controls: 0,
disablekb: 1,
enablejsapi: 0,
iv_load_policy: 3
};
var vid = [{
'videoId': '6MtH-HxAG-I',
'startSeconds': 5,
'endSeconds': 36,
'suggestedQuality': 'hd720'
}],
randomvid = Math.floor(Math.random() * (vid.length - 1 + 1));
function onYouTubePlayerAPIReady() {
tv = new YT.Player('tv', {
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
},
playerVars: playerDefaults
});
}
function onPlayerReady() {
tv.mute();
tv.loadVideoById(vid[randomvid]);
}
function onPlayerStateChange(e) {
if (e.data === 1) {
$('#tv').addClass('active');
}
else if (e.data === 0) {
tv.seekTo(vid[randomvid].startSeconds)
}
}
<link href='//bizweb.dktcdn.net/100/239/777/themes/569210/assets/owl.carousel.css?1502510126724' rel='stylesheet' type='text/css' />
<link href='//bizweb.dktcdn.net/100/239/777/themes/569210/assets/owl.transitions.css?1502510126724' rel='stylesheet' type='text/css' />
<script src='//bizweb.dktcdn.net/100/005/795/themes/534730/assets/jquery-2.2.4.min.js?1495533194821' type='text/javascript'></script>
<script src='//bizweb.dktcdn.net/100/239/777/themes/569210/assets/owl.carousel.min.js?1502510126724' type='text/javascript'></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
Thư viện
Đăng nhập
Khôi phục mật khẩu
Bạn đã có tài khoản? Đăng nhập ngay