scopesessions.org/js/videoplayer.js

79 lines
2.6 KiB
JavaScript

jQuery('.videobox').each(function() {
var $this = jQuery(this);
jQuery.getJSON('https://vimeo.com/api/oembed.json?url=' + encodeURIComponent(jQuery(this).attr('vimeo')), {format: "json"}, function(data) {
$this.css('background', 'url("' + data.thumbnail_url + '")');
$this.css('background-size', 'cover');
$this.css('background-position', 'center center');
$this.css('background-repeat', 'no-repeat');
});
$this.on('mouseover', function() {
var offset = $this.offset().left;
var center = jQuery(window).width()/2 - 50;
if( offset >= center) {
jQuery('#videotext').css('right', '');
jQuery('#videotext').css('left', '20px');
jQuery('#videotext').css('top', '80px');
} else {
jQuery('#videotext').css('left', '');
jQuery('#videotext').css('right', '20px');
jQuery('#videotext').css('top', '80px');
}
jQuery('#videotext').html($this.html());
$this.find(".playbutton").show();
timer = window.setTimeout(function() {
if( document.body.clientWidth >= 768 ) {
jQuery('#videotext').show(300);
}
}, 500);
});
$this.on('mouseout', function() {
jQuery('#videotext').hide();
$this.find(".playbutton").hide();
if (timer) {
window.clearTimeout(timer);
}
});
$this.on('click', function() {
jQuery('#videotext').hide();
$this.find("img").hide();
if (timer) {
window.clearTimeout(timer);
}
jQuery.getJSON('https://vimeo.com/api/oembed.json?url=' + encodeURIComponent(jQuery(this).attr('vimeo')), {format: "json"}, function(data) {
var player = jQuery('#videoplayer #player');
player.html(data.html)
player.find( "iframe" ).attr('width', "100%").attr('height', "100%");
var src = player.find( "iframe" ).attr('src');
player.find( "iframe" ).attr('src', src + "?title=0&byline=0&portrait=0&autoplay=1");
});
jQuery('#videoplayer').fadeIn(300, function () {
jQuery.vegas({ src: '/assets/bgphotos/' + Math.floor(Math.random() * 12) + '.png' });
});
});
jQuery('#videoplayer').on('click', function() {
jQuery(this).fadeOut(500, function() {
jQuery('#videoplayer #player').html('');
});
});
});
$('#video-roster').isotope({
// options
itemSelector: '.videobox'
});
// init Isotope
var $grid = $('#video-roster').isotope({
});
// filter items on button click
$('.filter-button-group').on( 'click', 'button', function() {
var filterValue = $(this).attr('data-filter');
$grid.isotope({ filter: filterValue });
$('.filter-button-group').find('button').css('background-color', 'black');
$(this).css('background-color', '#5a4b68');
});