At Christmas, music is everywhere. And this year we’ve joined forces with Big Ear Games to bring you our 'Song for Santa' challenge. This makes it easy for you to create your very own festive tune, plus you may even end up with an extra special present!
At Christmas, music is everywhere. And this year we’ve joined forces with Big Ear Games to bring you our 'Song for Santa' challenge. This makes it easy for you to create your very own festive tune, plus you may even end up with an extra special present!
To help your creativity, we’re offering a coupon code that disables ads and allows full experience of the Big Ear game free of charge until 1.1.2021
Available for iOS and Android devices
Launch the game and play the tutorial
In the hub, just tap the shop icon
In the shop, find the coupons card and tap it
Enter your coupon code: GENELEC in the coupon popup.
You're ready to go!
In case of a game update, you might need to enter the coupon code again
An error has occurred when reading existing sub-variable "title"; see cause exception! The type of the containing value was: extended_hash+string (org.json.JSONObject wrapped into f.e.b.StringModel)
----
FTL stack trace ("~" means nesting-related):
- Failed at: ${localizeField(video.properties.titl... [in template "20116#20152#257335" at line 19, column 37]
----
1<#if cmsEntity?has_content>
2<#if cmsEntity.getLocalizedField(profile, "/entity/relationships/videos")?has_content>
3 <#assign vods = cmsEntity.getLocalizedField(profile, "/entity/relationships/videos") >
4 <#assign videos = vods.references>
5</#if>
6<#if videos?has_content>
7<#include "${templatesPath}/227222" /> <@sectionHeader title="${title}" menuTitle="${menuTitle}" cssClasses="bg-gray-light" id="section-video"/>
8
9<#list videos.iterator() as video>
10 <#assign id = video.id>
11 <#if video?index=0 || videos.get(0).properties.isNull("url") && video?index=1>
12 <div id="video-title-${id}" class="video-title-container">
13 <#if !video.properties.isNull("title")>
14 <h2 class="text-bolder">${localizeField(video.properties.title, profile.getCMSLangCode())}</h2>
15 </#if>
16 </div>
17 <#else>
18 <div id="video-title-${id}" class="title-variant video-title-container">
19 <h2 class="text-bolder">${localizeField(video.properties.title, profile.getCMSLangCode())}</h2>
20 </div>
21 </#if>
22</#list>
23<br>
24
25
26<div class="zoom-gallery-video">
27 <div class="d-none d-lg-block">
28 <#list videos.iterator() as video>
29 <#if !video.properties.isNull("url")>
30 <#assign videoURL = "${video.properties.url}">
31 <#assign id = video.id>
32 <#if videoURL?contains("youtu.be")>
33 <#assign videoID = videoURL?split("/")?last />
34 <#if video?index=0>
35 <div class="responsive-video">
36 <div data-slide-id="video-${id}" class="zoom-gallery-slide-video video-slide responsive-wrapper active youtube" data-embed="${videoID}" id="video-${id}">
37 <span class="icon-play"></span>
38 <span class="round-button"></span>
39 </div>
40 </div>
41 <#elseif videos.get(video?index).properties.isNull("url") && video?index=video?index+1>
42 <div class="responsive-video">
43 <div data-slide-id="video-${id}" class="zoom-gallery-slide-video video-slide responsive-wrapper active youtube" data-embed="${videoID}" id="video-${id}">
44 <span class="icon-play"></span>
45 <span class="round-button"></span>
46 </div>
47 </div>
48 <#else>
49 <div class="responsive-video">
50 <div data-slide-id="video-${id}" class="zoom-gallery-slide-video video-slide responsive-wrapper youtube" id="video-${id}">
51 </div>
52 </div>
53 </#if>
54 <#elseif videoURL?contains("youtube")>
55 <#assign videoID = videoURL?replace("^.*\\?v=([\\w-_]*).*", "$1", "r") />
56 <#if video?index=0>
57 <div class="responsive-video">
58 <div data-slide-id="video-${id}" class="zoom-gallery-slide-video video-slide responsive-wrapper active youtube" data-embed="${videoID}" id="video-${id}">
59 <span class="icon-play"></span>
60 <span class="round-button"></span>
61 </div>
62 </div>
63 <#elseif videos.get(video?index).properties.isNull("url") && video?index=video?index+1>
64 <div class="responsive-video">
65 <div data-slide-id="video-${id}" class="zoom-gallery-slide-video video-slide responsive-wrapper active youtube" data-embed="${videoID}" id="video-${id}">
66 <span class="icon-play"></span>
67 <span class="round-button"></span>
68 </div>
69 </div>
70 <#else>
71 <div class="responsive-video">
72 <div data-slide-id="video-${id}" class="zoom-gallery-slide-video video-slide responsive-wrapper youtube" id="video-${id}">
73 </div>
74 </div>
75 </#if>
76 <#elseif videoURL?contains("vimeo")>
77 <#assign videoID = videoURL?split("/")?last />
78 <#if video?index=0>
79 <div class="responsive-video">
80 <div data-slide-id="video-${id}" class="zoom-gallery-slide-video video-slide responsive-wrapper active vimeo" data-embed="${videoID}" id="video-${id}">
81 <span class="icon-play"></span>
82 <span class="round-button"></span>
83 </div>
84 </div>
85 <#elseif videos.get(0).properties.isNull("url") && video?index=1>
86 <div class="responsive-video">
87 <div data-slide-id="video-${id}" class="zoom-gallery-slide-video video-slide responsive-wrapper active vimeo" data-embed="${videoID}" id="video-${id}">
88 <span class="icon-play"></span>
89 <span class="round-button"></span>
90 </div>
91 </div>
92 <#else>
93 <div class="responsive-video">
94 <div data-slide-id="video-${id}" class="zoom-gallery-slide-video video-slide responsive-wrapper vimeo" id="video-${id}">
95 <span class="icon-play"></span>
96 <span class="round-button"></span>
97 </div>
98 </div>
99 </#if>
100 </#if>
101 </#if>
102 </#list>
103 </div>
104
105 <div class="selectors">
106 <div class="video-carousel owl-carousel owl-theme">
107 <#list videos.iterator() as video>
108 <#if !video.properties.isNull("url")>
109
110 <#assign videoURL = "${video.properties.url}">
111 <#assign id = video.id>
112 <#if videoURL?contains("youtu.be")>
113 <#assign videoID = videoURL?split("/")?last />
114 <div class="card card-video">
115 <a data-slide-id="video-${id}"
116 class="youThumb videoThumb"
117 data-embed="${videoID}"
118 <#if !video.properties.isNull("title")>data-title="Video: ${localizeField(video.properties.title, profile.getCMSLangCode())}"</#if>
119 onclick="updateVideoTitle('${id}');"
120 data-id="${id}"
121 id="videoThumb-${id}">
122 <span class="icon-play"></span>
123 <span class="round-button"></span>
124 </a>
125 <div class="card-padding text-dark">
126 <#if !video.properties.isNull("title")>
127 <h3>${localizeField(video.properties.title, profile.getCMSLangCode())}</h3>
128 </#if>
129 <#if !video.properties.isNull("summary")>
130 <#assign summary = cmsContentFormatterService.getMarkdown(localizeField(video.properties.summary, profile.getCMSLangCode()))>
131 <div class="small">${summary}</div>
132 </#if>
133 </div>
134 </div>
135 <#elseif videoURL?contains("youtube")>
136 <#assign videoID = videoURL?replace("^.*\\?v=([\\w-_]*).*", "$1", "r") />
137 <div class="card card-video">
138
139 <a data-slide-id="video-${id}"
140 class="youThumb videoThumb"
141 data-embed="${videoID}"
142 <#if !video.properties.isNull("title")>data-title="Video: ${localizeField(video.properties.title, profile.getCMSLangCode())}"</#if>
143 onclick="updateVideoTitle('${id}');"
144 data-id="${id}"
145 id="videoThumb-${id}">
146 <span class="icon-play"></span>
147 <span class="round-button"></span>
148 </a>
149 <div class="card-padding text-dark">
150 <#if !video.properties.isNull("title")>
151 <h3>${localizeField(video.properties.title, profile.getCMSLangCode())}</h3>
152 </#if>
153 <#if !video.properties.isNull("summary")>
154 <#assign summary = cmsContentFormatterService.getMarkdown(localizeField(video.properties.summary, profile.getCMSLangCode()))>
155 <div class="small">${summary}</div>
156 </#if>
157 </div>
158 </div>
159 <#elseif videoURL?contains("vimeo")>
160 <#assign videoID = videoURL?split("/")?last />
161 <div class="card card-video">
162 <a data-slide-id="video-${id}"
163 class="vimeoThumb videoThumb"
164 data-thumb="${videoID}"
165 <#if !video.properties.isNull("title")>data-title="Video. ${localizeField(video.properties.title, profile.getCMSLangCode())}"</#if>
166 onclick="updateVideoTitle('${id}');"
167 data-id="${id}"
168 id="videoThumb-${id}">
169 <span class="icon-play"></span>
170 <span class="round-button"></span>
171 </a>
172 <div class="card-padding text-dark">
173 <#if !video.properties.isNull("title")>
174 <h3>${localizeField(video.properties.title, profile.getCMSLangCode())}</h3>
175 </#if>
176 <#if !video.properties.isNull("summary")>
177 <#assign summary = cmsContentFormatterService.getMarkdown(localizeField(video.properties.summary, profile.getCMSLangCode()))>
178 <div class="small">${summary}</div>
179 </#if>
180 </div>
181 </div>
182 </#if>
183 </#if>
184 </#list>
185 </div>
186 </div>
187</div>
188
189<@sectionFooter/>
190
191
192
193
194<script>
195
196function createVimeoUrl(id) {
197 var videoUrl = "https://vimeo.com/"+id;
198 var endpoint = 'https://vimeo.com/api/oembed.json';
199 var url = endpoint + '?url=' + encodeURIComponent(videoUrl) + '&width=1280&autoplay=1';
200 return url;
201};
202
203function loadVimeoJson(url,id,state) {
204 $.ajax({
205 type : "GET",
206 url : url,
207 dataType : "jsonp",
208 processData: false,
209 crossDomain: true,
210 success : function(result) {
211 var target = $("div").find("[data-embed='"+id+"']");
212 if (state === 'thumbnail') {
213 target.append("<img src='"+result.thumbnail_url+"' />");
214 $('.vimeoThumb').append("<img src='"+result.thumbnail_url+"' />");
215 } else if (state == 'video') {
216 target.html(result.html);
217 }
218 }
219 });
220};
221
222$('.vimeo').on('click',function() {
223 var id = $(this).data('embed');
224 var url = createVimeoUrl(id);
225 loadVimeoJson(url,id,'video');
226});
227$('.vimeoThumb').on('click',function() {
228 var id = $(this).data('thumb');
229 var url = createVimeoUrl(id);
230 loadVimeoJson(url,id,'video');
231});
232
233$(document).ready(function() {
234 var vimeo = document.querySelectorAll( ".vimeo" );
235 for (var i = 0; i < vimeo.length; i++) {
236 var url = createVimeoUrl(vimeo[i].dataset.embed);
237 loadVimeoJson(url,vimeo[i].dataset.embed,'thumbnail');
238 }
239});
240
241
242
243$(document).ready(function() {
244 var youtube = document.querySelectorAll( ".youtube" );
245 for (var i = 0; i < youtube.length; i++) {
246 if($(youtube[i]).attr("data-embed") !== undefined){
247 var source = "https://img.youtube.com/vi/"+ youtube[i].dataset.embed +"/maxresdefault.jpg";
248 var image = new Image();
249 image.src = source;
250 image.className = "poster-image";
251 image.setAttribute("alt", "");
252 image.setAttribute('onload', "youtube_check($(this))");
253 image.addEventListener( "load", function() {
254 youtube[ i ].appendChild( image );
255 }( i ) );
256 youtube[i].addEventListener( "click", function() {
257 var iframe = document.createElement( "iframe" );
258 iframe.setAttribute( "frameborder", "0" );
259 iframe.setAttribute( "allowfullscreen", "" );
260 iframe.setAttribute( "allow", "autoplay" );
261 iframe.setAttribute( "src", "https://www.youtube.com/embed/"+ this.dataset.embed +"?rel=0&autoplay=1" );
262 this.innerHTML = "";
263 this.appendChild( iframe );
264 } );
265 };
266 };
267});
268
269
270
271$(document).ready(function() {
272 var youThumb = document.querySelectorAll( ".youThumb" );
273 for (var i = 0; i < youThumb.length; i++) {
274 var source = "https://img.youtube.com/vi/"+ youThumb[i].dataset.embed +"/maxresdefault.jpg";
275 var imageAlt = "";
276 if($(youThumb[i]).attr("data-title") !== undefined){
277 imageAlt = youThumb[i].dataset.title;
278 }
279
280 var image = new Image();
281 image.className = "poster-img owl-lazy";
282 image.setAttribute('alt', imageAlt);
283 image.setAttribute('data-src', source);
284 image.setAttribute('onload', "youtube_check($(this)); fixVideoCarouselHeight()");
285 image.addEventListener( "load", function() {
286 youThumb[ i ].appendChild( image );
287 }( i ) );
288 youThumb[i].addEventListener( "click", function() {
289 if ($(window).outerWidth() < 992) {
290 var iframe = document.createElement( "iframe" );
291 iframe.setAttribute( "frameborder", "0" );
292 iframe.setAttribute( "allowfullscreen", "" );
293 iframe.setAttribute( "allow", "autoplay" );
294 iframe.setAttribute( "src", "https://www.youtube.com/embed/"+ this.dataset.embed +"?rel=0&autoplay=1" );
295 iframe.setAttribute( "height", $('.youThumb img').height());
296 iframe.setAttribute( "width", $('.youThumb img').width());
297 this.innerHTML = "";
298 this.appendChild( iframe );
299 }else{
300 var iframe = document.createElement( "iframe" );
301 iframe.setAttribute( "frameborder", "0" );
302 iframe.setAttribute( "allowfullscreen", "" );
303 iframe.setAttribute( "allow", "autoplay" );
304 iframe.setAttribute( "src", "https://www.youtube.com/embed/"+ this.dataset.embed +"?rel=0&autoplay=1" );
305 $('.youtube.active').html("");
306 $('.youtube.active').append( iframe );
307 }
308 } );
309 var thumbnail = ["maxresdefault", "mqdefault", "sddefault", "hqdefault", "default"];
310 var url = $('.poster-img').attr('src');
311 };
312});
313
314function youtube_check(e) {
315 var thumbnail = ["maxresdefault", "sddefault", "mqdefault", "hqdefault", "default"];
316 var url = e.attr("src");
317 if (e[0].naturalWidth === 120 && e[0].naturalHeight === 90) {
318 for (var i = 0, len = thumbnail.length - 1; i < len; i++) {
319 if (url.indexOf(thumbnail[i]) > 0) {
320 e.attr("src", url.replace(thumbnail[i], thumbnail[i + 1]));
321 break;
322 }
323 }
324 }
325};
326
327
328<#--
329 Make the height on the carousel same height
330-->
331function fixVideoCarouselHeight() {
332
333 <#-- There is also lazy loading so all the images might not yet have height... so when we set height for elements
334 have to make sure image is visible/loaded = has height
335
336 And for that reason we have to call this function when carousel page is changed ...
337 -->
338 var maxHeight = Math.max.apply(null, $('.card-video').map(function(){return $(this).height()}));
339 $('.card-video').each(function(index){
340 if ($(this).find("img").height() > 0 ) {
341 $(this).height(maxHeight)
342 }
343 });
344}
345
346
347$('.zoom-gallery-video .selectors a').on('click touch', function(e) {
348 var iframe = $('.active iframe[src*="youtube"],.active iframe[src*="vimeo"]');
349 if (iframe.length) {
350 iframe.attr('src',iframe.attr('src'));
351 }
352 $('.zoom-gallery-video .zoom-gallery-slide-video').removeClass('active');
353 $('.zoom-gallery-video .selectors a').removeClass('active');
354 $(iframe).remove();
355 $('.zoom-gallery-video .zoom-gallery-slide-video[data-slide-id="'+$(this).attr('data-slide-id')+'"]').addClass('active');
356 $(this).addClass('active');
357 $('.youtube.active').innerHTML = "";
358 e.preventDefault();
359 });
360
361$(document).ready(function() {
362 $('.video-carousel').owlCarousel({
363 loop:false,
364 nav:true,
365 dots:false,
366 lazyLoad:true,
367 margin:10,
368 navText : ['<i class="icon-angle-left">','<i class="icon-angle-right">'],
369 responsive:{
370 0:{items:1, slideBy:1},
371 600:{items:1, slideBy:1},
372 1000:{items:3, slideBy:3}
373 },
374});
375});
376
377function updateVideoTitle(id) {
378 if ($(window).outerWidth() >= 992) {
379 $('div[id^=video-title]').hide();
380 $("#video-title-"+id).show();
381 }
382}
383
384
385function updateThumbnail(id) {
386 if ($(window).outerWidth() < 992) {
387 var youThumb = $("#videoThumb-"+id);
388 if ($("#videoThumb-"+id+ " img").length == 0){
389 var source = "https://img.youtube.com/vi/"+ $(youThumb).attr("data-embed") +"/maxresdefault.jpg";
390 var image = new Image();
391 var playButton = document.createElement( "span" );
392 var roundButton = document.createElement( "span" );
393 playButton.setAttribute("class", "icon-play");
394 roundButton.setAttribute("class", "round-button");
395 youThumb.append( playButton );
396 youThumb.append( roundButton );
397 image['src'] = source;
398 image.className = "poster-img";
399 image.setAttribute('onload', "youtube_check($(this))");
400 youThumb.append( image );
401 };
402 };
403};
404
405
406$(document).ready(function() {
407if ($(window).outerWidth() < 992) {
408 var owl = $('.video-carousel');
409owl.owlCarousel();
410owl.on('translated.owl.carousel', function(event) {
411 if ($(".owl-item").hasClass("active")){
412 var id = $(".active").find(".videoThumb").attr("data-id");
413 updateVideoTitle(id);
414 updateThumbnail(id)
415 }
416});
417
418owl.on('change.owl.carousel', function(event) {
419 fixVideoCarouselHeight();
420 if ($(".owl-item").hasClass("active")){
421 var iframe = $('.active iframe[src*="youtube"],.active iframe[src*="vimeo"]');
422 $(iframe).remove();
423 $(".owl-item").removeClass("active");
424 }
425});
426};
427});
428</script>
429
430
431<style>
432
433
434 <#list videos.iterator() as video>
435 <#assign id = video.id>
436
437 .zoom-gallery-video .selectors a[data-slide-id=video-${id}] {
438 position: relative;
439 }
440
441 </#list>
442
443<#-- Small screens videos are displayed only in carousel. So list title is enough otherwise title is shown double and no need for that
444 Wider screens there is main video content and there need to be title for that + title in "list/carousel" for items.
445-->
446@media screen and (max-width: 991px) {
447 #section-video .video-title-container { display: none; }
448}
449
450
451
452</style>
453</#if>
454</#if>
