/** * youtubeVideoGallery plugin for jquery * Simple video gallery for youtube, for more details see http://plugins.jquery.com/youtubevideogallery * * @author clanceyp * @see http://plugins.jquery.com/youtubevideogallery/ * @version 1.3.0 * */ ;(function($) { "use strict"; $.fn.extend({ youtubeVideoGallery:function(options) { var version = '1.3.0', isLegacyIE = (/\bMSIE [4|5|6|7]/.test(navigator.userAgent)), defaults = { assetFolder : '', fancybox : { arrows : false, closeBtn : true, closeEffect : 'fade', helpers : { media : {}, buttons : {} }, openEffect : 'fade' }, forceLegacyIE:false, iframeTemplate:'', innerHeight:344, innerWidth:425, newWindow: '(opens in a new window)', playButton: 'play-button-red@40.png', plugin:'self', style:'', title:'default', thumbWidth:150, videos:[], urlImg : 'https://img.youtube.com/vi/$id/0.jpg', urlEmbed : 'https://www.youtube.com/embed/$id', urlLink : 'https://www.youtube.com/watch?v=$id' }; this.test = {}; this.version = version; function log(message){ if ('console' in window && window.console.log){ window.console.log(message); } } function getVideoLinks($this){ var arr = [], a = $this.find("a"); a.each(function(i, el){ arr.push({ id: getId( $(el).attr('href') ), title:$(el).text() }); }); return arr; } function getIdFromEntry(obj){ if (typeof obj === 'string'){ return getId(obj); } else if (obj.id && typeof obj.id === 'string'){ return obj.id; } else if (obj.link && obj.link.length ){ for ( var i = 0, l = obj.link.length; i < l ; i++){ if (obj.link[i].type === 'text/html'){ return getId(obj.link[i].href) } } } log('could not find ID from object, maybe an unsupported API?') return ''; } function getId(href){ var id = ''; if (!!href && href.indexOf('www.youtube.com/v/') > 0) { id = getBefore(href.split('www.youtube.com/v/')[1], '?') } else if (!!href && href.indexOf('/embed/') > 0){ id = getBefore(href.split('/embed/')[1], '?'); } else if (!!href && href.indexOf('?v=') > 0){// this could be version if API call!! id = getBefore(href.split('?v=')[1],'&'); } else if (!!href && href.indexOf('video:') > 0){ id = getBefore(href.split('video:')[1], ':'); } else if (!!href){ id = href; } return id; } function getBefore(str, before){ if (!!str && str.indexOf(before)){ str = str.split(before)[0]; } return str; } function getIframeTemplate(innerWidth, innerHeight){ var str = options.iframeTemplate; return str.replace('{options.innerHeight}', innerHeight).replace('{options.innerWidth}', innerWidth); } function open(e){ var el = e.currentTarget; e.preventDefault(); $('div.youtube-videogallery-bodycover').css( { 'height':$(document).height()} ); $('div.youtube-videogallery-display').css({ 'marginLeft':-options.innerWidth/2, 'marginTop':-options.innerHeight/2 }); $('#youtube-videogallery-iframe').attr( 'src', options.urlEmbed.replace("$id", $(el).attr('data-youtube-id') ) ); $('body').addClass('youtube-videogallery-active'); } function close(e){ $('#youtube-videogallery-iframe').attr( 'src', 'about:blank'); $('body').removeClass('youtube-videogallery-active'); } function setButtonMargin(w, h, context){ if (w === 0 || h === 0){ $(context).find("img.youtube-videogallery-play").remove(); return; } $(context).find("img.youtube-videogallery-play").css({ 'marginLeft':-w/2 +'px', 'marginTop':-h/2 +'px' }); } function getStyle(style){ if (!!style){ return "youtube-videogallery-" + style; } return ''; } function getTitleStyle(title){ return title === 'full' ? 'youtube-videogallery-allowtitle' : ''; } function getVideosFromFeed(data){ var videos = [], items = (data && data.data && data.data.items) ? data.data.items : (data && data.feed && data.feed.entry) ? data.feed.entry : []; $( items ).each(function(i, item){ var id = getIdFromEntry(item); videos.push({ id: getIdFromEntry(item), title: item.title.$t || item.title }); }); return videos; } /** * this.test = object * * Test object to expose private methods to a test API. * This allows us to test private methods, without * exposing them (e.g. they can't be overwritten) * */ this.test = { getBefore:getBefore, getId:getId, getVideoLinks:getVideoLinks, getIframeTemplate:getIframeTemplate, getTitleStyle:getTitleStyle, getStyle:getStyle, getVideosFromFeed:getVideosFromFeed, getIdFromEntry:getIdFromEntry }; function load($this, options) { var videos = ( options.videos.length ) ? options.videos : getVideoLinks($this), html = '', href, src, titleSpan, video, playButtonSrc = (!!options.assetFolder) ? options.assetFolder +'/'+ options.playButton : options.playButton , img = document.createElement('img'); img.onload = function(){ setButtonMargin(this.width, this.height, $this); }; img.onerror = function(){ setButtonMargin(0, 0, $this); }; img.src = playButtonSrc+'?'+ +(new Date()); for (var i = 0, l = videos.length; i < l; i++){ video = videos[i]; if (!video.id){continue;} href = options.urlLink.replace("$id", video.id); src = options.urlImg.replace("$id", video.id); titleSpan = (!!video.title && options.title !== 'none') ? ''+ video.title +'' : ''; html+= '