https://www.avanscoperta.it/wp-content/themes/avanscoperta/script/js/youtube-overlay.js

1/**
2  * Plugin Name:  Click Image Play YouTube Video
3  * Plugin URI:   https://github.com/sricharankrishnan/click-image-play-youtube-video
4  * Description:  Click Image Play YouTube Video is a Jquery based plugin, designed to be integrated into your web app on the
5                  client side. It provides a simple yet effective user interface (in the form of an overlay), to help play
6                  youtube embeded videos based on a click event.
7  * Requirements: Jquery version 3 upwards, CSS, Sass (only if you are using this in the pre compile phase)
8  * Author:       Sricharan Krishnan | [email protected]
9  * Author URI:   https://github.com/sricharankrishnan
10  **/
11
12/**
13  * Please read the integration directions given for clarity
14  **/
15
16(function (moduleFunc) {
17  try {
18    if(typeof define === "function" && !!define.amd) {
19      define("cmb-youtube-overlay", function() {
20        return moduleFunc(window, document);
21      });
22    }
23    else if(!!window && typeof window === "object") {
24      window.YoutubeOverlayModule = moduleFunc(window, document);
25    }
26    else {
27      throw new Error("Error on Load -> Check - May be not sure about your dev environment");
28    }
29  }
30  catch(thisError) {
31    console.error(thisError);
32    return;
33  }
34})(function(w, d) {
35  /*
36   * The constructor requires a request object that would have -
37   * requestObj.sourceUrl (which is the youtube embed url)
38   * requestObj.triggerElement (id value of the element upon which click event is registered)
39   * requestObj.progressCallback (the function that gets called for updates from this Constructor for loading, completion etc...
40   *
41   * requestObj is mandatory;
42   */
43  var YtConst = function(requestObj) {
44    try {
45      if(!requestObj) {
46        throw new Error("Youtube overlay requires a request object argument.");
47        return;
48      }
49      else if(!("sourceUrl" in requestObj) || !("triggerElement" in requestObj)) {
50        throw new Error("Youtube overlay requires requestObject with mandatory props");
51        return;
52      }
53      else if(typeof requestObj.sourceUrl !== "string" || typeof requestObj.triggerElement !== "string") {
54        throw new Error("Youtube overlay requires requestObject with mandatory props which are of string types.");
55        return;
56      }
57      else if(!!requestObj.progressCallback && typeof requestObj.progressCallback !== "function") {
58        throw new Error("Youtube overlay - Progress Callback must be of function type if it is specified in the request");
59      }
60      else {
61        this.overlayContainer = "#youtubePlayerOverlay";
62        this.sourceUrl = requestObj.sourceUrl;
63        this.triggerElement = requestObj.triggerElement;
64        this.progressCallback = requestObj.progressCallback;
65        this._isDoneDone = {
66          progressType: "request-completed",
67          progressMessage: "Your request has been accepted and processed."
68        };
69        this._isBeingDone = {
70          progressType: "processing-request",
71          progressMessage: "Your request is being processed. Please wait."
72        };
73        this._isBeingClosed = {
74          progressType: "player-closed",
75          progressMessage: "The overlay player has been closed down."
76        };
77      }
78    }
79    catch(thisError) {
80      console.error(thisError);
81    }
82  }
83  var cpo = YtConst.prototype;
84  /* initializes the entire process */
85  cpo.activateDeployment = function() {
86    var $this = this;
87    $this.createPlayerContainer();
88  };
89  /* incase the overlay modal is not there, create it */
90  cpo.createPlayerContainer = function() {
91    var $this = this;
92    if(jQuery($this.overlayContainer).length === 0) {
93      var o = jQuery('<div class="videoPlayerOverlay hide hiddenTransform" id="youtubePlayerOverlay" data-hasloaded="false"></div>'),
94          cButton = jQuery('<button id="youtubeOverlayCloser" class="defaultButton closeIcon"><img src="https://s3.ap-south-1.amazonaws.com/choosemybicycle/cmb-website-icons/cancel-close-icons/x-mark-black-icon.svg" class="img-responsive center-block" alt="Close" title="close"/></button>'),
95          b = jQuery("body");
96      cButton.appendTo(o);
97      o.appendTo(b);
98    }
99    $this.triggerCheck();
100  };
101  /* makes sure that the trigger element is actually present */

102  cpo.triggerCheck = function() {
103    var $this = this;
104    try {
105      if(jQuery($this.triggerElement).length === 0) {
106        throw new Error("Youtube Overlay Constructor -> Not able to locate the required Trigger-Element. Can you please check id? ---> " +
107          $this.triggerElement
108        );
109        return;
110      }
111      $this.activateOnClickHandler();
112    }
113    catch(thisError) {
114      console.error(thisError);
115    }
116  };
117  /* registers an on click event for the trigger element id */
118  cpo.activateOnClickHandler = function() {
119    var $this = this,
120        t = $this.triggerElement,
121        s = $this.sourceUrl,
122        o = $this.overlayContainer;
123
124    jQuery(t).on("click", function() {
125      $this.progressCallback($this._isBeingDone);
126      var nowLoaded = jQuery(o).attr("data-hasloaded"),
127          triggerId = jQuery(t).attr("id"),
128          idEquals = nowLoaded === triggerId;
129
130      if(idEquals) {
131        $this.openPlayerOverlay();
132        $this.progressCallback($this._isDoneDone);
133      }
134      else {
135        jQuery(o).find("iframe").remove();
136        var requiredIframe = jQuery('<iframe width="100%" height="100%" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen mozallowfullscreen webkitallowfullscreen></iframe>');
137        requiredIframe.attr({
138          src: $this.sourceUrl + "?showinfo=0&rel=0"
139        });
140        requiredIframe.appendTo(jQuery(o));
141        jQuery(o).attr("data-hasloaded", triggerId);
142        $this.openPlayerOverlay();
143        $this.progressCallback($this._isDoneDone);
144      }
145    });
146  };
147  /* this function opens the modal overlay and helps to auto play the video
148   * autoplay feature works on desktop only */
149  cpo.openPlayerOverlay = function() {
150    var $this = this,
151        o = $this.overlayContainer;
152    jQuery(o).removeClass("hide");
153    setTimeout(function() {
154      jQuery(o).removeClass("hiddenTransform");
155      setTimeout(initTheseInternals, 280);
156    }, 80);
157
158    function initTheseInternals() {
159      var thisIframe = jQuery(o).find("iframe")[0];
160      thisIframe.src += "&autoplay=1";
161
162      jQuery(o).find("#youtubeOverlayCloser").off("click").on("click", function() {
163        var nowVidSrc = thisIframe.src.split("&autoplay=1")[0],
164            srcAutoplayOff = nowVidSrc + "&autoplay=0";
165        thisIframe.src = srcAutoplayOff;
166        thisIframe.src = nowVidSrc;
167        $this.closePlayerOverlay();
168      });
169
170      /* initialize escape key press event */
171      $this.closeOnEscapeKeyPress();
172    }
173  };
174  /* closes the modal overlay and stop the video from playing */
175  cpo.closePlayerOverlay = function() {
176    var $this = this,
177        o = $this.overlayContainer;
178    jQuery(o).addClass("hiddenTransform");
179    setTimeout(function() {
180      jQuery(o).addClass("hide");
181      $this.progressCallback($this._isBeingClosed);
182    }, 260);
183  };
184  /* you can close this module overlay if the user presses the Escape key */
185  cpo.closeOnEscapeKeyPress = function() {
186    var $this = this,
187        o = $this.overlayContainer;
188    jQuery(d).on("keyup", function(event) {
189      if(event.which === 27 && !jQuery(o).hasClass("hiddenTransform")) {
190        jQuery(o).find("#youtubeOverlayCloser").trigger("click");
191      }
192    });
193  };
194  /* you can close this module overlay if the user clicks outside the iframe space */
195  cpo.closeOnClickingOverlay = function() {
196    var $this = this;
197    var overlay = jQuery($this.overlayContainer);
198    /* handler */
199    overlay.on("click", function(event) {
200      if (event.target.tagName.toLowerCase() !== "iframe" && event.target.id === "youtubePlayerOverlay") {
201        overlay.find("#youtubeOverlayCloser").trigger("click");
202      }
203    });
204  }
205
206  return YtConst;
207});