124 lines
4.1 KiB
JavaScript
124 lines
4.1 KiB
JavaScript
;
|
|
(function ($, window) {
|
|
var defaults = {
|
|
ratio: 16 / 9,
|
|
videoId: 'ZCAnLxRvNNc',
|
|
mute: true,
|
|
repeat: true,
|
|
width: $(window).width(),
|
|
wrapperZIndex: 99,
|
|
playButtonClass: 'kkBgVideo-play',
|
|
pauseButtonClass: 'kkBgVideo-pause',
|
|
muteButtonClass: 'kkBgVideo-mute',
|
|
volumeUpClass: 'kkBgVideo-volume-up',
|
|
volumeDownClass: 'kkBgVideo-volume-down',
|
|
increaseVolumeBy: 5,
|
|
start: 0
|
|
};
|
|
var kkBgVideo = function (node, options) {
|
|
var options = $.extend({}, defaults, options),
|
|
$body = $('body')
|
|
$node = $(node);
|
|
var kkBgVideoContainer = '<div id="kk-bgvideo-container" class="video-bg" style="overflow: hidden; position: fixed; z-index: 3; width: 100%; height: 100%"><div id="kk-bgvideo-player" style="position: relative"></div></div><div id="kk-bgvideo-shield" class="video-bg" style="width: 100%; height: 100%; z-index: 4; position: absolute; left: 0; top: 0;"></div>';
|
|
$body.prepend(kkBgVideoContainer);
|
|
$node.css({
|
|
position: 'relative',
|
|
'z-index': options.wrapperZIndex
|
|
});
|
|
window.player;
|
|
window.onYouTubeIframeAPIReady = function () {
|
|
player = new YT.Player('kk-bgvideo-player', {
|
|
width: options.width,
|
|
height: Math.ceil(options.width / options.ratio),
|
|
videoId: options.videoId,
|
|
playerVars: {
|
|
controls: 0,
|
|
showinfo: 0,
|
|
modestbranding: 1,
|
|
iv_load_policy: 3,
|
|
wmode: 'transparent',
|
|
rel: 0
|
|
},
|
|
events: {
|
|
'onReady': onPlayerReady,
|
|
'onStateChange': onPlayerStateChange,
|
|
'onPlaybackQualityChange': onPlayerPlaybackQualityChange
|
|
}
|
|
});
|
|
}
|
|
window.onPlayerReady = function (e) {
|
|
resize();
|
|
if (options.mute)
|
|
e.target.mute();
|
|
e.target.seekTo(options.start);
|
|
e.target.setPlaybackQuality('default');
|
|
e.target.setVolume(70);
|
|
e.target.playVideo();
|
|
}
|
|
window.onPlayerPlaybackQualityChange = function (e) {}
|
|
window.onPlayerStateChange = function (state) {
|
|
if (state.data === 0 && options.repeat) {
|
|
player.seekTo(options.start);
|
|
}
|
|
}
|
|
var resize = function () {
|
|
var width = $('#kk-bgvideo-container').width(),
|
|
pWidth,
|
|
height = $(window).height(),
|
|
pHeight,
|
|
$kkBgVideoPlayer = $('#kk-bgvideo-player');
|
|
if (width / options.ratio < height) {
|
|
pWidth = Math.ceil(height * options.ratio);
|
|
$kkBgVideoPlayer.width(pWidth).height(height).css({
|
|
left: (width - pWidth) / 2,
|
|
top: 0
|
|
});
|
|
} else {
|
|
pHeight = Math.ceil(width / options.ratio);
|
|
$kkBgVideoPlayer.width(width).height(pHeight).css({
|
|
left: 0,
|
|
top: (height - pHeight) / 2
|
|
});
|
|
}
|
|
}
|
|
$(window).on('resize.kkBgVideo', function () {
|
|
resize();
|
|
})
|
|
$('body').on('click', '.' + options.playButtonClass, function (e) {
|
|
e.preventDefault();
|
|
player.playVideo();
|
|
}).on('click', '.' + options.pauseButtonClass, function (e) {
|
|
e.preventDefault();
|
|
player.pauseVideo();
|
|
}).on('click', '.' + options.muteButtonClass, function (e) {
|
|
e.preventDefault();
|
|
(player.isMuted()) ? player.unMute() : player.mute();
|
|
}).on('click', '.' + options.volumeDownClass, function (e) {
|
|
e.preventDefault();
|
|
var currentVolume = player.getVolume();
|
|
if (currentVolume < options.increaseVolumeBy)
|
|
currentVolume = options.increaseVolumeBy;
|
|
player.setVolume(currentVolume - options.increaseVolumeBy);
|
|
}).on('click', '.' + options.volumeUpClass, function (e) {
|
|
e.preventDefault();
|
|
if (player.isMuted())
|
|
player.unMute();
|
|
var currentVolume = player.getVolume();
|
|
if (currentVolume > 100 - options.increaseVolumeBy)
|
|
currentVolume = 100 - options.increaseVolumeBy;
|
|
player.setVolume(currentVolume + options.increaseVolumeBy);
|
|
})
|
|
}
|
|
var tag = document.createElement('script');
|
|
tag.src = "https://www.youtube.com/iframe_api";
|
|
var firstScriptTag = document.getElementsByTagName('script')[0];
|
|
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
|
|
$.fn.kkBgVideo = function (options) {
|
|
return this.each(function () {
|
|
if (!$.data(this, 'kkBgVideo_instantiated')) {
|
|
$.data(this, 'kkBgVideo_instantiated', kkBgVideo(this, options));
|
|
}
|
|
});
|
|
}
|
|
})(jQuery, window);
|