Edit File - File Manager

Edit File: themify-youtube-bg.js

/*                                                                                                                                  _
 jquery.mb.YTPlayer.src.js                                                                                                                  _
 last modified: 05/01/16 17.43                                                                                                                    _                                                                                       _
 */
var ytp = ytp || {};
(function ($, ytp) {

$.themify_ytb = {
        version: "3.0.8",
        apiKey: "",
        defaults: {
            containment: "self",
            ratio: "auto", // "auto", "16/9", "4/3"
            videoID: null,
            startAt: 0,
            stopAt: 0,
            fs:0,
            autoPlay: true,
            vol: 100, // 1 to 100
            addRaster: false,
            quality: "default", //or “small”, “medium”, “large”, “hd720”, “hd1080”, “highres”
            mute: false,
            loop: true,
            showYTLogo: false,
            mobileFallbackImage: null,
            optimizeDisplay: true,
            align: "center,center", // top,bottom,left,right
            onReady: function (player) {
            }
        },
        /**
         *  @fontface icons
         *  */
        controls: {
            play: "P",
            pause: "p",
            mute: "M",
            unmute: "A",
            onlyYT: "O",
            showSite: "R",
            ytLogo: "Y"
        },
        loading: null,
        locationProtocol: location.protocol,
        onYouTubeIframeAPIReady: function (YTPlayer, playerId, playerBox) {
            var $YTPlayer = $(YTPlayer),
                    playerVars = {
                        'modestbranding': 1,
                        'autoplay': 1,
                        'controls': 0,
                        'showinfo': 0,
                        'rel': 0,
                        'disablekb': '',
                        'fs': 0,
                        'loop': YTPlayer.opt.loop?1:0,
                        'enablejsapi': 1,
                        'version': 3,
                        'playerapiid': playerId,
                        'origin': '*',
                        'allowfullscreen': false,
                        'wmode': 'transparent',
                        'iv_load_policy': 3,
                        'html5': 1
                    };
            YTPlayer.opt.autoPlay = typeof YTPlayer.opt.autoPlay === "undefined" ? false : YTPlayer.opt.autoPlay;

YTPlayer.opt.vol = YTPlayer.opt.vol ? YTPlayer.opt.vol : 100;
            $.themify_ytb.getDataFromAPI(YTPlayer);
            $YTPlayer.on("YTPChanged", function () {

YTPlayer.isInit = true;
                var v = $('<div>').get(0);
                playerBox.append(v);
                //if is mobile && isPlayer fallback to the default YT player
                if (ThemifyBuilderModuleJs._isMobile() && YTPlayer.canPlayOnMobile) {
                    // Try to adjust the player dimention
                    if (YTPlayer.opt.containment.outerWidth() > $(window).width()) {
                        YTPlayer.opt.containment.css({
                            maxWidth: "100%"
                        });
                        var h = YTPlayer.opt.containment.outerWidth() * .563;
                        YTPlayer.opt.containment.css({
                            maxHeight: h
                        });
                    }
                    new YT.Player(v, {
                        videoId: YTPlayer.videoID.toString(),
                        width: '100%',
                        height: h,
                        playerVars: playerVars,
                        events: {
                            'onReady': function (event) {
                                YTPlayer.player = event.target;
                            }
                        }
                    });
                    return;
                }

new YT.Player(v, {
                    videoId: YTPlayer.videoID.toString(),
                    playerVars: playerVars,
                    events: {
                        'onReady': function (event) {
                            YTPlayer.player = event.target;
                            YTPlayer.isReady = YTPlayer.isPlayer && !YTPlayer.opt.autoPlay ? false : true;
                            YTPlayer.playerEl = YTPlayer.player.getIframe();
                            $(YTPlayer.playerEl).attr("unselectable", "on");
                            $YTPlayer.optimizeDisplay();
                            $(window).off("tfsmartresize." + playerId).on("tfsmartresize.tfVideo tfsmartresize." + playerId, function () {
                                $YTPlayer.optimizeDisplay();
                            });

$.themify_ytb.checkForState(YTPlayer);
                        },
                        'onStateChange': function (event) {
                            if (typeof event.target.getPlayerState !== "function")
                                return;
                            var state = event.target.getPlayerState();

if (YTPlayer.preventTrigger) {
                                YTPlayer.preventTrigger = false;
                                return;
                            }

YTPlayer.state = state;

var eventType;
                            switch (state) {
                                case -1: //----------------------------------------------- unstarted
                                    eventType = "YTPUnstarted";
                                    break;
                                case 0: //------------------------------------------------ ended
                                    eventType = "YTPEnd";
                                    if(YTPlayer.opt.loop){
                                       YTPlayer.player.seekTo(0);
                                    }
                                    break;
                                case 1: //------------------------------------------------ play
                                    eventType = "YTPPlay";

case 2: //------------------------------------------------ pause
                                    eventType = "YTPPause";
                                    break;
                                case 3: //------------------------------------------------ buffer
                                    YTPlayer.player.setPlaybackQuality(YTPlayer.opt.quality);
                                    eventType = "YTPBuffering";
                                    break;
                                case 5: //------------------------------------------------ cued
                                    eventType = "YTPCued";
                                    break;
                                default:
                                    break;
                            }

// Trigger state events
                            var YTPEvent = $.Event(eventType);
                            YTPEvent.time = YTPlayer.currentTime;
                            if (YTPlayer.canTrigger)
                                $(YTPlayer).trigger(YTPEvent);
                        },
                        /**
                         *
                         * @param e
                         */
                        'onPlaybackQualityChange': function (e) {
                            var quality = e.target.getPlaybackQuality();
                            var YTPQualityChange = $.Event("YTPQualityChange");
                            YTPQualityChange.quality = quality;
                            $(YTPlayer).trigger(YTPQualityChange);
                        },
                        /**
                         *
                         * @param err
                         */
                        'onError': function (err) {

if (err.data == 150) {
                                console.log("Embedding this video is restricted by Youtube.");
                            }

if (typeof YTPlayer.opt.onError === "function")
                                YTPlayer.opt.onError($YTPlayer, err);
                        }
                    }
                });
            });
        },
        /**
         *
         * @param options
         * @returns [players]
         */
        buildPlayer: function (options) {

return this.each(function () {
                var YTPlayer = this,
                        playerId = "themify_ytb_" + options.id,
                        $YTPlayer = $(YTPlayer);

YTPlayer.loop = 0;
                YTPlayer.opt = {};
                YTPlayer.state = {};
                $.extend(YTPlayer.opt, $.themify_ytb.defaults, options);
                if (!YTPlayer.hasChanged) {
                    YTPlayer.defaultOpt = {};
                    $.extend(YTPlayer.defaultOpt, $.themify_ytb.defaults, options);
                }

YTPlayer.isRetina = (window.retina || window.devicePixelRatio > 1);
                YTPlayer.isAlone = false;
                YTPlayer.hasFocus = true;
                YTPlayer.videoID = options.videoID;

YTPlayer.defaultOpt.containment = YTPlayer.opt.containment = YTPlayer.opt.containment === "self" ? $(this) : $(YTPlayer.opt.containment);

var isPlayer = YTPlayer.opt.containment.is($(this));

YTPlayer.canPlayOnMobile = isPlayer && $(this).children().length === 0;
                YTPlayer.isPlayer = false;

if (!isPlayer) {
                    $YTPlayer.hide();
                } else {
                    YTPlayer.isPlayer = true;
                }

var wrapper = $("<div/>").addClass("themify_ytb_wrapper big-video-wrap").attr("id", "wrapper_" + playerId),
                        playerBox = $("<div/>").addClass("themify_ytb_playerbox").prop("id", playerId);
                playerBox.appendTo(wrapper);

YTPlayer.opt.containment.prepend(wrapper);
                YTPlayer.wrapper = wrapper;

if (ThemifyBuilderModuleJs._isMobile() && !YTPlayer.canPlayOnMobile) {

if (YTPlayer.opt.mobileFallbackImage) {
                        YTPlayer.opt.containment.css({
                            backgroundImage: "url(" + YTPlayer.opt.mobileFallbackImage + ")",
                            backgroundPosition: "center center",
                            backgroundSize: "cover",
                            backgroundRepeat: "no-repeat"
                        });
                    }
                    ;

$YTPlayer.remove();
                    $(document).trigger("YTPUnavailable");
                    return;
                }

$.themify_ytb.onYouTubeIframeAPIReady(YTPlayer, playerId, playerBox);

});

},
        /**
         *
         * @param YTPlayer
         */
        getDataFromAPI: function (YTPlayer) {
            YTPlayer.videoData = $(YTPlayer.playerEl).data("YTPlayer_data_" + YTPlayer.videoID);
            $(YTPlayer).off("YTPData.YTPlayer").on("YTPData.YTPlayer", function () {
                if (YTPlayer.hasData) {

if (YTPlayer.isPlayer && !YTPlayer.opt.autoPlay) {
                        var bgndURL = YTPlayer.videoData.thumb_max || YTPlayer.videoData.thumb_high || YTPlayer.videoData.thumb_medium;
                        YTPlayer.opt.containment.css({
                            background: "rgba(0,0,0,0.5) url(" + bgndURL + ") center center",
                            backgroundSize: "cover"
                        });
                        YTPlayer.opt.backgroundUrl = bgndURL;
                    }
                }
            });

if (YTPlayer.videoData) {

setTimeout(function () {
                    YTPlayer.opt.ratio = YTPlayer.opt.ratio == "auto" ? "16/9" : YTPlayer.opt.ratio;
                    YTPlayer.dataReceived = true;
                    $(YTPlayer).trigger("YTPChanged");
                    var YTPData = $.Event("YTPData");
                    YTPData.prop = {};
                    for (var x in YTPlayer.videoData)
                        YTPData.prop[ x ] = YTPlayer.videoData[ x ];
                    $(YTPlayer).trigger(YTPData);
                }, 500);

YTPlayer.hasData = true;
            } else if ($.themify_ytb.apiKey) {
                // Get video info from API3 (needs api key)
                // snippet,player,contentDetails,statistics,status
                $.getJSON($.themify_ytb.locationProtocol + "//www.googleapis.com/youtube/v3/videos?id=" + YTPlayer.videoID + "&key=" + $.themify_ytb.apiKey + "&part=snippet", function (data) {
                    YTPlayer.dataReceived = true;
                    $(YTPlayer).trigger("YTPChanged");

if (opt) {
                $.extend(YTPlayer.opt, opt); //YTPlayer.defaultOpt,
            }
            YTPlayer.videoID = opt.videoID;
            var YTPChangeMovie = $.Event("YTPChangeMovie");
            YTPChangeMovie.time = YTPlayer.currentTime;
            YTPChangeMovie.videoId = YTPlayer.videoID;
            $(YTPlayer).trigger(YTPChangeMovie);

$(YTPlayer).ThemifyYTBGetPlayer().cueVideoByUrl(encodeURI($.themify_ytb.locationProtocol + "//www.youtube.com/v/" + YTPlayer.videoID), 1, YTPlayer.opt.quality);
            $(YTPlayer).optimizeDisplay();

$.themify_ytb.checkForState(YTPlayer);
            $.themify_ytb.getDataFromAPI(YTPlayer);

},
        /**
         *
         * @returns {player}
         */
        getPlayer: function () {
            return $(this).get(0).player;
        },
        playerDestroy: function () {
            var YTPlayer = this.get(0);
            YTPlayer.isInit = false;
            YTPlayer.videoID = null;
            YTPlayer.wrapper.remove();
            return this;
        },
        /**
         *
         * @returns {$.themify_ytb}
         */
        play: function () {
            var YTPlayer = this.get(0);
            if (!YTPlayer.isReady)
                return this;

YTPlayer.player.playVideo();
            YTPlayer.state = 1;
            $(YTPlayer).css("background-image", "none");
            return this;
        },
        /**
         *
         * @returns {$.themify_ytb}
         */
        stop: function () {
            var YTPlayer = this.get(0);
            YTPlayer.player.stopVideo();
            return this;
        },
        /**
         *
         * @returns {$.themify_ytb}
         */
        pause: function () {
            var YTPlayer = this.get(0);
            YTPlayer.player.pauseVideo();
            YTPlayer.state = 2;
            return this;
        },
        /**
         *
         * @param val
         * @returns {$.themify_ytb}
         */
        seekTo: function (val) {
            this.get(0).player.seekTo(val, true);
            return this;
        },
        /**
         *
         * @param val
         * @returns {$.themify_ytb}
         */
        setVolume: function (val) {
            var YTPlayer = this.get(0);
            YTPlayer.opt.vol = val;
            YTPlayer.player.setVolume(val);
            return this;
        },
        /**
         *
         * @returns {$.themify_ytb}
         */
        mute: function () {
            var YTPlayer = this.get(0);
            YTPlayer.player.mute();
            YTPlayer.player.setVolume(0);
            var YTPEvent = $.Event("YTPMuted");
            YTPEvent.time = YTPlayer.currentTime;
            if (YTPlayer.canTrigger){
                $(YTPlayer).trigger(YTPEvent);
            }
            return this;
        },
        /**
         *
         * @returns {$.themify_ytb}
         */
        unmute: function () {
            var YTPlayer = this.get(0);
            YTPlayer.player.unMute();
            YTPlayer.player.setVolume(YTPlayer.opt.vol);
            var YTPEvent = $.Event("YTPUnmuted");
            YTPEvent.time = YTPlayer.currentTime;
            if (YTPlayer.canTrigger)
                $(YTPlayer).trigger(YTPEvent);
            return this;
        },
        /**
         *
         * @param YTPlayer
         */
        checkForState: function (YTPlayer) {
            //Checking if player has been removed from scene
            if (!$.contains(document, YTPlayer)) {
                $(YTPlayer).ThemifyYTBPlayerDestroy();
                return;
            }

YTPlayer.preventTrigger = true;
            YTPlayer.state = 2;
            if (YTPlayer.opt.mute) {
                $(YTPlayer).ThemifyYTBMute();
            }
            YTPlayer.player.seekTo((YTPlayer.opt.startAt ? YTPlayer.opt.startAt : 1), true);
        },
        /**
         *
         * @returns {string} time
         */
        getTime: function () {
            return $.themify_ytb.formatTime(this.get(0).currentTime);
        },
        /**
         *
         * @returns {string} total time
         */
        getTotalTime: function () {
            return $.themify_ytb.formatTime(this.get(0).totalTime);
        },
        /**
         *
         * @param align
         */
        setAlign: function (align) {
            this.optimizeDisplay(align);
        },
        /**
         *
         * @param align
         */
        getAlign: function () {
            return this.get(0).opt.align;
        },
        /**
         *
         * @param s
         * @returns {string}
         */
        formatTime: function (s) {
            var min = Math.floor(s / 60),
                    sec = Math.floor(s - (60 * min));
            return(min <= 9 ? "0" + min : min) + " : " + (sec <= 9 ? "0" + sec : sec);
        }
    };

/**
     *
     * @param align
     * can be center, top, bottom, right, left; (default is center,center)
     */
    $.fn.optimizeDisplay = function (align) {
        var YTPlayer = this.get(0),
                vid = {};

YTPlayer.opt.align = align || YTPlayer.opt.align;

YTPlayer.opt.align = typeof YTPlayer.opt.align !== "undefined " ? YTPlayer.opt.align : "center,center";
        var YTPAlign = YTPlayer.opt.align.split(",");

if (YTPlayer.opt.optimizeDisplay) {
            var win = {};
            var el = YTPlayer.wrapper;

win.width = el.outerWidth();
            win.height = el.outerHeight();

vid.width = win.width + 100;
            vid.height = YTPlayer.opt.ratio === "16/9" ? Math.ceil(vid.width * (9 / 16)) : Math.ceil(vid.width * (3 / 4));
            vid.marginTop = -((vid.height - win.height) / 2);
            vid.marginLeft = 0;

var lowest = vid.height < win.height;

if (lowest) {

vid.height = win.height;
                vid.width = YTPlayer.opt.ratio === "16/9" ? Math.floor(win.height * (16 / 9)) : Math.floor(win.height * (4 / 3));

vid.marginTop = 0;
                vid.marginLeft = -((vid.width - win.width) / 2);

}

for (var a in YTPAlign) {

//var al = YTPAlign[ a ].trim();
                var al = YTPAlign[ a ].replace(/ /g, "");

switch (al) {

case "top":
                        vid.marginTop = lowest ? -((vid.height - win.height) / 2) : 0;
                        break;

case "bottom":
                        vid.marginTop = lowest ? 0 : -(vid.height - win.height);
                        break;

case "left":
                        vid.marginLeft = 0;
                        break;

case "right":
                        vid.marginLeft = lowest ? -(vid.width - win.width) : 0;
                        break;

default:
                        break;
                }

}

} else {
            vid.width = "100%";
            vid.height = "100%";
            vid.marginTop = 0;
            vid.marginLeft = 0;
        }

$(YTPlayer.playerEl).css({
            width: vid.width,
            height: vid.height,
            marginTop: vid.marginTop,
            marginLeft: vid.marginLeft
        });

};

/* Exposed public method */
    $.fn.ThemifyYTBPlayer = $.themify_ytb.buildPlayer;
    $.fn.ThemifyYTBGetPlayer = $.themify_ytb.getPlayer;
    $.fn.ThemifyYTBGetVideoID = $.themify_ytb.getVideoID;
    $.fn.ThemifyYTBChangeMovie = $.themify_ytb.changeMovie;
    $.fn.ThemifyYTBPlayerDestroy = $.themify_ytb.playerDestroy;

$.fn.ThemifyYTBPlay = $.themify_ytb.play;
    $.fn.ThemifyYTBStop = $.themify_ytb.stop;
    $.fn.ThemifyYTBPause = $.themify_ytb.pause;
    $.fn.ThemifyYTBSeekTo = $.themify_ytb.seekTo;

$.fn.ThemifyYTBMute = $.themify_ytb.mute;
    $.fn.ThemifyYTBUnmute = $.themify_ytb.unmute;
    $.fn.ThemifyYTBSetVolume = $.themify_ytb.setVolume;

$.fn.ThemifyYTBGetVideoData = $.themify_ytb.getVideoData;
    $.fn.ThemifyYTBSetVideoQuality = $.themify_ytb.setVideoQuality;

$.fn.ThemifyYTBGetTime = $.themify_ytb.getTime;
    $.fn.ThemifyYTBGetTotalTime = $.themify_ytb.getTotalTime;

$.fn.ThemifyYTBSetAlign = $.themify_ytb.setAlign;
    $.fn.ThemifyYTBGetAlign = $.themify_ytb.getAlign;

})(jQuery, ytp);

Back to File Manager