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