{"version":"1.0.4","templatekey":"videolightbox","name":"Video Lightbox (widget)","instructions":"This template will show an image thumbnail of a Youtube/Vimeo video. When the thumbnail is clicked the  video will open in a light box.","content":"<div id=\"{{AUTOID}}_content\" class=\"hide\">\n<!-- {{video_url}} -->\n</div>\n<a class=\"videobox_item\" id=\"{{AUTOID}}\" data-fancybox data-src=\"#{{AUTOID}}_content\" data-width=\"800\" data-height=\"450\" href=\"javascript:;\" style=\"margin: 5px;\">\n  <div id=\"{{AUTOID}}_vbox\"></div>\n  <span id=\"{{AUTOID}}_vboxtitle\"></span>\n</a>","templateend":"","variabledefaults":"linktext=\"Click to show\", video_url=\"https://vimeo.com/369326084\",thumbwidth=\"240\",start=\"0\"","jscontent":"require(['jquery','core/log'], function($,log) {\n    \n    var iframetemplate =   '<iframe src=\"@videourl@\"  frameborder=\"0\" allow=\"autoplay; fullscreen; picture-in-picture\" style=\"position:absolute;top:0;left:0;width:100%;height:100%;padding: 15px\"   title=\"Video Fullscreen\"></iframe>';\n    \n    function parseVideoURL(url) {\n    \n            var retVal = {};\n            var matches;\n            var success = false;\n    \n            if ( url.match('http(s)?://(www.)?youtube|youtu\\.be') ) {\n              if (url.match('embed')) { retVal.id = url.split(/embed\\//)[1].split('\"')[0]; }\n              else if (url.match('shorts')) { retVal.id = url.split(/shorts\\//)[1].split('\"')[0]; }\n                else { retVal.id = url.split(/v\\/|v=|youtu\\.be\\//)[1].split(/[?&]/)[0]; }\n                retVal.provider = \"youtube\";\n                retVal.params = \"?rel=0&start={{start}}\";\n                retVal.videoURL = '//www.youtube.com/embed/' + retVal.id;\n                retVal.success = true;\n            } else if (matches = url.match(/vimeo.com\\/(\\d+)/)) {\n                retVal.provider = \"vimeo\";\n                retVal.params = \"?h=874d9d7ec4&color=F5975F&title=0&byline=0&portrait=0#t={{start}}s\";\n                retVal.id = matches[1];\n                retVal.videoURL = '//player.vimeo.com/video/' + retVal.id;\n                retVal.success = true;\n            }\n            return retVal;\n    }\n    \n    if(!$.fn.fancybox){ \n    $.getScript('https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.3.5/jquery.fancybox.min.js', function(){});\n    }\n    \n    var videodetails = parseVideoURL(\"{{video_url}}\");\n    var theurl = videodetails.videoURL + videodetails.params;\n    var iframe = iframetemplate.replace('@videourl@',theurl);\n    document.getElementById(\"{{AUTOID}}_content\").innerHTML=iframe;\n    \n    console.log(videodetails);\n    \n    switch(videodetails.provider){\n       case 'youtube':\n            $('#{{AUTOID}}_vbox').append('<div class=\"filter_genericotwo_ytl\"><img  style=\"width: {{thumbwidth}}px\" src=\"https://img.youtube.com/vi/' + videodetails.id + '/mqdefault.jpg\"/></div>');\n           break;\n    \n       case 'vimeo':\n          var vimeoapiurl = 'https://vimeo.com/api/oembed.json?url=https://vimeo.com/' +videodetails.id;\n          $.ajax({\n                url: vimeoapiurl,\n                crossDomain: true,\n                type: 'GET',\n                error: function(xhr, status, error) {\n                    console.log(theurl);\n                    console.log(error);\n                },\n                success: function(data) {\n                    $('#{{AUTOID}}_vbox').append('<img  style=\"width: {{thumbwidth}}px\" src=\"' + data.thumbnail_url_with_play_button + '\"/>');\n                 //   $('#' + {{AUTOID}} + '_vboxtitle').text( data.title);\n                }\n         });\n        break;\n    }\n\n});\n\n","importcss":"//cdnjs.cloudflare.com/ajax/libs/fancybox/3.3.5/jquery.fancybox.min.css","customcss":".filter_genericotwo_ytl img{display: block;}\n.filter_genericotwo_ytl { \n\tposition: relative; \n\tdisplay: inline-block;\n}\n.filter_genericotwo_ytl:after {\n\tcontent: \">\";\n\t  font-size: 20px;\n\t  line-height: 30px;\n\t  color: #FFFFFF;\n\t  text-align: center;\n\t  position: absolute;\n\t  top: 40%;\n\t  left: 40%;\n\t  width: 20%;\n\t  height: 32px;\n\t  z-index: 2;\n\t  background: #FF0000;\n\t  border-radius: 8px;\n\t  pointer-events: none;\n}","dataset":"","datasetvars":"","allowedcontexts":"","allowedcontextids":""}