/*___________________________________________________________________________________________________________________________________________________ _ jquery.mb.components _ _ _ _ file: jquery.mb.YTPlayer.src.js _ _ last modified: 2/3/21 7:31 PM _ _ _ _ Open Lab s.r.l., Florence - Italy _ _ _ _ email: matteo@open-lab.com _ _ site: http://pupunzi.com _ _ http://open-lab.com _ _ blog: http://pupunzi.open-lab.com _ _ Q&A: http://jquery.pupunzi.com _ _ _ _ Licences: MIT, GPL _ _ http://www.opensource.org/licenses/mit-license.php _ _ http://www.gnu.org/licenses/gpl.html _ _ _ _ Copyright (c) 2001-2021. Matteo Bicocchi (Pupunzi); _ ___________________________________________________________________________________________________________________________________________________*/ var ytp = ytp || {}; let YTPRndSuffix = new Date().getTime(); let YTPTimerLabels = { init : "YTPlayerInit_" + YTPRndSuffix, startPlaying: "YTPlayerStartPlay_" + YTPRndSuffix }; function onYouTubeIframeAPIReady() { if (ytp.YTAPIReady) return; ytp.YTAPIReady = true; jQuery(document).trigger('YTAPIReady') } let getYTPVideoID = function (url) { let videoID, playlistID; if (url.indexOf('youtu.be') > 0 || url.indexOf('youtube.com/embed') > 0) { videoID = url.substr(url.lastIndexOf('/') + 1, url.length); playlistID = videoID.indexOf('?list=') > 0 ? videoID.substr(videoID.lastIndexOf('='), videoID.length) : null; videoID = playlistID ? videoID.substr(0, videoID.lastIndexOf('?')) : videoID } else if (url.indexOf('http') > -1) { //videoID = url.match( /([\/&]v\/([^&#]*))|([\\?&]v=([^&#]*))/ )[ 1 ]; videoID = url.match(/[\\?&]v=([^&#]*)/)[1]; playlistID = url.indexOf('list=') > 0 ? url.match(/[\\?&]list=([^&#]*)/)[1] : null } else { videoID = url.length > 15 ? null : url; playlistID = videoID ? null : url } return { videoID : videoID, playlistID: playlistID } }; (function (jQuery, ytp) { jQuery.mbYTPlayer = { name : 'jquery.mb.YTPlayer', version: '3.3.9', build : '7619', author : 'Matteo Bicocchi (pupunzi)', apiKey : '', /* * Default options for the player */ defaults : { /** videoURL (string) the complete Youtube video URL or the short url or the videoID */ videoURL: null, /** containment (string) default containment for the player */ containment: 'body', /** ratio (string or number) "auto", "16/9", "4/3" or number: 4/3, 16/9 */ ratio: 'auto', /** fadeOnStartTime (int) fade in timing at video start */ fadeOnStartTime: 1000, /** startAt (int) start second */ startAt: 0, /** stopAt (int) stop second */ stopAt: 0, /** autoPlay (bool) on page load video should start or pause */ autoPlay: true, /** delayAtStart (bool) If the YT API don't fire the event the player will try to start anyway after... */ delayAtStart: 1000, /** coverImage (string) The path to the image to be used as cover if the autoPlay option is set to false */ coverImage: false, /** loop (bool or int) video should loop or not; if number it will loop for the specified times */ loop: true, /** addRaster (bool) shows a raster image over the video (added via CSS) You can change the raster image via CSS: .YTPOverlay.raster { background: url(images/raster.png)} */ addRaster: false, /** mask (bool or object) the key is the second and the value is the path to the image Ex: mask:{ 0:'assets/mask-1.png', 5:'assets/mask-2.png', 30: false, 50:'assets/mask-3.png'} */ mask: false, /** opacity (int) 0 to 1 */ opacity: 1, /** quality (string) @deprecated setPlaybackQuality has been deprecated on the YT API and doesn't work anymore “small”, “medium”, “large”, “hd720”, “hd1080”, “highres”, "default" */ quality: 'hd1080', /** vol (int) 0 to 100 */ vol: 50, /** mute (bool) mute the video at start */ mute: false, /** showControls (bool) shows the control bar at the bottom of the containment */ showControls: true, /** anchor (string) center,top,bottom,left,right combined in pair */ anchor: 'center,center', /** showAnnotations (bool) display the annotations on video */ showAnnotations: false, /** cc_load_policy (bool) display the subtitles */ cc_load_policy: false, /** showYTLogo (bool) display the Youtube logotype inside the button bar */ showYTLogo: true, /** useOnMobile (bool) activate the player also on mobile */ useOnMobile: true, /** playOnlyIfVisible (bool) play the video only if the containment is on screen */ playOnlyIfVisible: false, /** onScreenPercentage (bool) percentage of the player height the video should stop or start when visible */ onScreenPercentage: 30, /** * goFullScreenOnPlay (bool) * if the player containment is set to "self" this allow the video to go fullscreen when played */ goFullScreenOnPlay: false, /** stopMovieOnBlur (bool) stop the video if the window loose the focus */ stopMovieOnBlur: true, /** realfullscreen (bool) the video when in full screen covers all the display */ realFullscreen: true, /** optimizeDisplay (bool) The video always fit the containment without displaying the black strips */ optimizeDisplay: true, /** abundance (bool) the abudance of the video size */ abundance: 0.3, /** gaTrack (bool) track the video plays on GA */ gaTrack: true, /** remember_last_time (bool) when the page is reloaded the video will start from the last position */ remember_last_time: false, /** addFilters (bool or string) add one or more CSS filters as object to the video Ex: {sepia: 50, hue_rotate : 220} */ addFilters: false, /** useNoCookie (bool) use https://www.youtube-nocookie.com host to serve the video */ useNoCookie: true, /** onReady (function) a callback function fired once the player is ready */ onReady: function (player) { }, /** onReady (function) a callback function fired if there's an error */ onError: function (player, err) { }, /** onEnd (function) a callback function fired when the video ends */ onEnd: function () { } }, /** * @fontface icons * */ controls : { play : 'P', pause : 'p', mute : 'M', unmute : 'A', onlyYT : 'O', showSite: 'R', ytLogo : 'Y' }, controlBar : null, locationProtocol: 'https:', /** * Applicable filters */ defaultFilters: { grayscale : {value: 0, unit: '%'}, hue_rotate: {value: 0, unit: 'deg'}, invert : {value: 0, unit: '%'}, opacity : {value: 0, unit: '%'}, saturate : {value: 0, unit: '%'}, sepia : {value: 0, unit: '%'}, brightness: {value: 0, unit: '%'}, contrast : {value: 0, unit: '%'}, blur : {value: 0, unit: 'px'} }, /** * build the player * @param options * @returns [players] */ buildPlayer: function (options) { // jQuery(function(){ if (!ytp.YTAPIReady && typeof window.YT === 'undefined') { jQuery('#YTAPI').remove(); let tag = jQuery('