https://www.istitutotoscanini.it/files/youtubegallerywall.js

1//** YouTube Gallery Wall- By Dynamic Drive DHTML code library: http://www.dynamicdrive.com
2//** Script Download/ instructions page: http://www.dynamicdrive.com/dynamicindex17/youtube-gallery-wall.htm
3//** Created: April 12, 2016
4//** Last modified: April 15th, 16 v1.1 to fix iOS devices sometimes not loading videos
5
6var youtubeapidfd = $.Deferred()
7
8// define onYouTubeIframeAPIReady() function
9function onYouTubeIframeAPIReady(){
10	youtubeapidfd.resolve()
11}
12	
13;(function($){
14
15	var KEYCODE_ESC = 27
16
17	var thumbnailformat = 'https://img.youtube.com/vi/VIDEOID/0.jpg'
18
19	var ytubelightbox = 
20		'<div class="videobox">'
21		+ '<div class="centeredchild">'
22		+ '<div class="videowrapper">'
23		+ '<div id="videoplayer"></div>'
24		+ '</div>'
25		+ '</div>'
26		+ '</div>'
27
28//// End Configuration here ////
29
30	var defaults = {}
31	var $videobox
32	var youtubeplayer
33	var ismobile = navigator.userAgent.match(/(iPad)|(iPhone)|(iPod)|(android)|(webOS)/i) != null //boolean check for popular mobile browsers
34	var isiOS = navigator.userAgent.match(/(iPad)|(iPhone)|(iPod)/i) != null //boolean check for iOS devices
35	
36	function getyoutubeid(link){
37		// Assumed Youtube URL formats
38		// https://www.youtube.com/watch?v=Pe0jFDPHkzo
39		// https://youtu.be/Pe0jFDPHkzo
40		// https://www.youtube.com/v/Pe0jFDPHkzo
41		// and more
42	     
43		//See http://stackoverflow.com/a/6904504/4360074
44		var youtubeidreg = /(?:youtube\.com\/(?:[^\/]+\/.+\/|(?:v|e(?:mbed)?)\/|.*[?&]v=)|youtu\.be\/)([^"&?\/ ]{11})/i;
45		return youtubeidreg.exec(link)[1] // return Youtube video ID portion of link
46	}
47
48	function createlightbox(){
49		$videobox = $(ytubelightbox).appendTo(document.body)
50
51		// Hide lightbox when clicked on
52		$videobox.on('click', function(){
53			hidelightbox()
54		})
55		
56		// Exclude youtube iframe from above action
57		$videobox.find('.centeredchild').on('click', function(e){
58			e.stopPropagation()
59		})	
60	}
61
62	function showlightbox(){
63		$(document.documentElement).addClass('hidescrollbar')
64		$videobox.css({display:'block'})
65	}
66
67	function hidelightbox(){
68		$(document.documentElement).removeClass('hidescrollbar')
69		$videobox.css({display:'none'})
70		youtubeplayer.stopVideo()
71	}
72	
73	// load Youtube API code asynchronously
74	var tag = document.createElement('script')
75	
76	tag.src = "https://www.youtube.com/iframe_api";
77	var firstScriptTag = document.getElementsByTagName('script')[0]
78	firstScriptTag.parentNode.insertBefore(tag, firstScriptTag)
79
80	youtubeapidfd.then(function(){
81		createlightbox()
82		$(document).on('keyup', function(e){
83			if (typeof $videobox != 'undefined'){
84				if (e.keyCode == KEYCODE_ESC)
85					hidelightbox()
86			}
87		})
88	})
89
90	
91	// Creates a new YT.Player() instance
92	function createyoutubeplayer(videourl, containerid){
93		youtubeplayer = new YT.Player(containerid, {
94			videoId: videourl,
95			playerVars: {autoplay:1}
96		})
97	}
98
99	jQuery.fn.youtubegallery = function(options){
100		var s = $.extend({}, defaults, options)
101		return this.each(function(){ //return jQuery obj
102			var $ul = $(this)
103			$ul.addClass('youtubewall')
104			var $lis = $ul.find('li')
105			$lis.each(function(i){
106				var $li = $(this)
107				var link = $li.find('a').get(0)
108				var videoid = getyoutubeid(link.getAttribute('href'))
109				var thumbnail = thumbnailformat.replace('VIDEOID', videoid)
110				var doclink = link.getAttribute('data-url')
111				if (ismobile){
112					/* iOS :hover fix: http://stackoverflow.com/questions/18047353/fix-css-hover-on-iphone-ipad-ipod */
113					$li.css({cursor: 'pointer'})
114				}
115				$li.html(
116					'<div class="thumbwrap">'
117					+ '<img src="' + thumbnail + '" />'
118					+ '<div class="panel"><div class="panelinner"><i class="play fa fa-play-circle-o"></i> <a class="externallink fa fa-external-link-square" href="' + doclink +'"></a></div></div>'
119					+ '</div>'
120					//+ ((caption != "")? '<div class="caption">' + caption + '</div>' : "")
121				)
122				if (!doclink){
123					$li.find('.externallink').css({display: 'none'})
124				}
125				$li.find('.panel').find('.play').on('click', function(){
126					if (typeof $videobox != 'undefined'){
127						showlightbox()
128						if (typeof youtubeplayer == 'undefined'){
129							createyoutubeplayer(videoid, 'videoplayer')
130						}
131						else{
132							if (isiOS){
133								youtubeplayer.cueVideoById(videoid)
134							}
135							else{
136								youtubeplayer.loadVideoById(videoid)
137							}
138						}
139					}
140				})
141			})
142		}) //end return this.each
143	}
144
145
146})(jQuery);