outsourced video related JS, fixed CSS things, added visualberlinFestival videos
This commit is contained in:
parent
0149d8e464
commit
c0b7ca672c
91 changed files with 23073 additions and 17874 deletions
79
js/videoplayer.js
Normal file
79
js/videoplayer.js
Normal file
|
|
@ -0,0 +1,79 @@
|
|||
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');
|
||||
});
|
||||
Loading…
Add table
Add a link
Reference in a new issue