')\r\n .append(that.$item);\r\n\r\n if (this.options.bypassCss) {\r\n that.$itemWrapper.css({\r\n 'display': 'none'\r\n });\r\n } else {\r\n that.$itemWrapper.css(styles.itemWrapper);\r\n that.$item.css(styles.item);\r\n }\r\n\r\n that.$item.bind(isVideo ? 'canplay' : 'load', function (e) {\r\n var $this = $(this)\r\n , $wrapper = $this.parent()\r\n , options = $wrapper.data('options');\r\n \r\n if (overrideOptions) {\r\n options = $.extend({}, options, overrideOptions);\r\n }\r\n\r\n var imgWidth = this.naturalWidth || this.videoWidth || this.width\r\n , imgHeight = this.naturalHeight || this.videoHeight || this.height;\r\n\r\n // Save the ratio\r\n $wrapper.data('ratio', imgWidth / imgHeight);\r\n\r\n var getOption = function (opt) {\r\n return options[opt] !== undefined ?\r\n options[opt] :\r\n that.options[opt];\r\n };\r\n\r\n var transition = getOption('transition');\r\n var transitionEasing = getOption('transitionEasing');\r\n var transitionDuration = getOption('transitionDuration');\r\n\r\n // Show the image, then delete the old one\r\n var bringInNextImage = function () {\r\n \r\n if (oldVideoWrapper) {\r\n oldVideoWrapper.stop();\r\n oldVideoWrapper.destroy();\r\n }\r\n \r\n $oldItemWrapper.remove();\r\n\r\n // Resume the slideshow\r\n if (!that.paused && that.images.length > 1) {\r\n that.cycle();\r\n }\r\n\r\n // Now we can clear the background on the element, to spare memory\r\n if (!that.options.bypassCss && !that.isBody) {\r\n that.$container.css('background-image', 'none');\r\n }\r\n\r\n // Trigger the \"after\" and \"show\" events\r\n // \"show\" is being deprecated\r\n $(['after', 'show']).each(function () {\r\n that.$container.trigger($.Event('backstretch.' + this, evtOptions), [that, newIndex]);\r\n });\r\n \r\n if (isVideo) {\r\n that.videoWrapper.play();\r\n }\r\n };\r\n\r\n if ((that.firstShow && !that.options.animateFirst) || !transitionDuration || !transition) {\r\n // Avoid transition on first show or if there's no transitionDuration value\r\n $wrapper.show();\r\n bringInNextImage();\r\n } else {\r\n\r\n performTransition({\r\n 'new': $wrapper,\r\n old: $oldItemWrapper,\r\n transition: transition,\r\n duration: transitionDuration,\r\n easing: transitionEasing,\r\n complete: bringInNextImage\r\n });\r\n\r\n }\r\n\r\n that.firstShow = false;\r\n\r\n // Resize\r\n that.resize();\r\n });\r\n\r\n that.$itemWrapper.appendTo(that.$wrap);\r\n\r\n that.$item.attr('alt', selectedImage.alt || '');\r\n that.$itemWrapper.data('options', selectedImage);\r\n\r\n if (!isVideo) {\r\n that.$item.attr('src', selectedImage.url);\r\n }\r\n \r\n that._currentImage = selectedImage;\r\n\r\n return that;\r\n }\r\n\r\n , current: function () {\r\n return this.index;\r\n }\r\n\r\n , next: function () {\r\n var args = Array.prototype.slice.call(arguments, 0);\r\n args.unshift(this.index < this.images.length - 1 ? this.index + 1 : 0);\r\n return this.show.apply(this, args);\r\n }\r\n\r\n , prev: function () {\r\n var args = Array.prototype.slice.call(arguments, 0);\r\n args.unshift(this.index === 0 ? this.images.length - 1 : this.index - 1);\r\n return this.show.apply(this, args);\r\n }\r\n\r\n , pause: function () {\r\n // Pause the slideshow\r\n this.paused = true;\r\n \r\n if (this.videoWrapper) {\r\n this.videoWrapper.pause();\r\n }\r\n \r\n return this;\r\n }\r\n\r\n , resume: function () {\r\n // Resume the slideshow\r\n this.paused = false;\r\n \r\n if (this.videoWrapper) {\r\n this.videoWrapper.play();\r\n }\r\n \r\n this.cycle();\r\n return this;\r\n }\r\n\r\n , cycle: function () {\r\n // Start/resume the slideshow\r\n if(this.images.length > 1) {\r\n // Clear the timeout, just in case\r\n clearTimeout(this._cycleTimeout);\r\n\r\n var duration = (this._currentImage && this._currentImage.duration) || this.options.duration;\r\n var isVideo = isVideoSource(this._currentImage);\r\n \r\n var callNext = function () {\r\n this.$item.off('.cycle');\r\n \r\n // Check for paused slideshow\r\n if (!this.paused) {\r\n this.next();\r\n }\r\n };\r\n\r\n // Special video handling\r\n if (isVideo) {\r\n\r\n // Leave video at last frame\r\n if (!this._currentImage.loop) {\r\n var lastFrameTimeout = 0;\r\n\r\n this.$item\r\n .on('playing.cycle', function () {\r\n var player = $(this).data('player');\r\n\r\n clearTimeout(lastFrameTimeout);\r\n lastFrameTimeout = setTimeout(function () {\r\n player.pause();\r\n player.$video.trigger('ended');\r\n }, (player.getDuration() - player.getCurrentTime()) * 1000);\r\n })\r\n .on('ended.cycle', function () {\r\n clearTimeout(lastFrameTimeout);\r\n });\r\n }\r\n\r\n // On error go to next\r\n this.$item.on('error.cycle initerror.cycle', $.proxy(callNext, this));\r\n }\r\n\r\n if (isVideo && !this._currentImage.duration) {\r\n // It's a video - playing until end\r\n this.$item.on('ended.cycle', $.proxy(callNext, this));\r\n \r\n } else {\r\n // Cycling according to specified duration\r\n this._cycleTimeout = setTimeout($.proxy(callNext, this), duration);\r\n }\r\n \r\n }\r\n return this;\r\n }\r\n\r\n , destroy: function (preserveBackground) {\r\n // Stop the resize events\r\n $(window).off('resize.backstretch orientationchange.backstretch');\r\n\r\n // Stop any videos\r\n if (this.videoWrapper) {\r\n this.videoWrapper.destroy();\r\n }\r\n \r\n // Clear the timeout\r\n clearTimeout(this._cycleTimeout);\r\n\r\n // Remove Backstretch\r\n if(!preserveBackground) {\r\n this.$wrap.remove();\r\n }\r\n this.$container.removeData('backstretch');\r\n }\r\n };\r\n \r\n /**\r\n * Video Abstraction Layer\r\n *\r\n * Static methods:\r\n * > VideoWrapper.loadYoutubeAPI() -> Call in order to load the Youtube API. \r\n * An 'youtube_api_load' event will be triggered on $(window) when the API is loaded.\r\n *\r\n * Generic:\r\n * > player.type -> type of the video\r\n * > player.video / player.$video -> contains the element holding the video\r\n * > player.play() -> plays the video\r\n * > player.pause() -> pauses the video\r\n * > player.setCurrentTime(position) -> seeks to a position by seconds\r\n * \r\n * Youtube:\r\n * > player.ytId will contain the youtube ID if the source is a youtube url\r\n * > player.ytReady is a flag telling whether the youtube source is ready for playback\r\n * */\r\n\r\n var VideoWrapper = function () { this.init.apply(this, arguments); };\r\n\r\n /**\r\n * @param {Object} options\r\n * @param {String|Array|Array<{{src: String, type: String?}}>} options.url\r\n * @param {Boolean} options.loop=false\r\n * @param {Boolean?} options.mute=true\r\n * @param {String?} options.poster\r\n * loop, mute, poster\r\n */\r\n VideoWrapper.prototype.init = function (options) {\r\n\r\n var that = this;\r\n \r\n var $video;\r\n\r\n var setVideoElement = function () {\r\n that.$video = $video;\r\n that.video = $video[0];\r\n };\r\n \r\n // Determine video type\r\n \r\n var videoType = 'video';\r\n \r\n if (!(options.url instanceof Array) &&\r\n YOUTUBE_REGEXP.test(options.url)) {\r\n videoType = 'youtube';\r\n }\r\n \r\n that.type = videoType;\r\n\r\n if (videoType === 'youtube') {\r\n\r\n // Try to load the API in the meantime\r\n VideoWrapper.loadYoutubeAPI();\r\n\r\n that.ytId = options.url.match(YOUTUBE_REGEXP)[2];\r\n var src = 'https://www.youtube.com/embed/' + that.ytId +\r\n '?rel=0&autoplay=0&showinfo=0&controls=0&modestbranding=1' +\r\n '&cc_load_policy=0&disablekb=1&iv_load_policy=3&loop=0' +\r\n '&enablejsapi=1&origin=' + encodeURIComponent(window.location.origin);\r\n\r\n that.__ytStartMuted = !!options.mute || options.mute === undefined;\r\n\r\n $video = $('')\r\n .attr({ 'src_to_load': src })\r\n .css({ 'border': 0, 'margin': 0, 'padding': 0 })\r\n .data('player', that);\r\n \r\n if (options.loop) {\r\n $video.on('ended.loop', function () {\r\n if (!that.__manuallyStopped) {\r\n that.play();\r\n }\r\n });\r\n }\r\n\r\n that.ytReady = false;\r\n\r\n setVideoElement();\r\n\r\n if (window['YT']) {\r\n that._initYoutube();\r\n $video.trigger('initsuccess');\r\n } else {\r\n $(window).one('youtube_api_load', function () {\r\n that._initYoutube();\r\n $video.trigger('initsuccess');\r\n });\r\n }\r\n \r\n }\r\n else {\r\n // Traditional