Fix video insertion in element

dist/vegas.css

@@ -15,6 +15,7 @@
 }
 
 .vegas-overlay {
+    opacity: .5;
     background: transparent url(overlays/02.png) center center repeat;
 }
 
@@ -38,9 +39,9 @@
 .vegas-slide-inner {
     margin: 0;
     padding: 0;
+    background: transparent center center no-repeat;
     -webkit-transform: translateZ(0);
             transform: translateZ(0);
-    background: transparent center center no-repeat;
 }
 
 body .vegas-container {

dist/vegas.js

@@ -188,10 +188,6 @@
                 if (this.settings.preload || this.settings.preloadVideos) {
                     if (this.support.video && this.settings.slides[i].video) {
                         video = this._video(this.settings.slides[i].video);
-                        video.preload = true;
-                        video.muted = true;
-
-                        videoCache[this.settings.slides[i].video.toString()] = video;
                     }
                 }
             }
@@ -241,10 +237,11 @@
 
         _video: function (srcs) {
             var video, 
-                source;
+                source,
+                cacheKey = srcs.toString();
 
-            if (videoCache[srcs.toString()]) {
-                return videoCache[srcs.toString()];
+            if (videoCache[cacheKey]) {
+                return videoCache[cacheKey];
             }
 
             if (srcs instanceof Array === false) {
@@ -252,6 +249,8 @@
             }
 
             video = document.createElement('video');
+            video.muted = true;
+            video.preload = true;
 
             srcs.forEach(function (src) {
                 source = document.createElement('source');
@@ -259,6 +258,8 @@
                 video.appendChild(source);
             });
 
+            videoCache[cacheKey] = video;
+
             return video;
         },
 
@@ -283,7 +284,7 @@
 
             var $slide,
                 $inner,
-                self    = this,
+                $video,
                 $slides = this.$elmt.children('.vegas-slide'),
                 src     = this.settings.slides[nb].src,
                 videos  = this.settings.slides[nb].video,
@@ -292,6 +293,7 @@
                 valign  = this._options('valign'),
                 color   = this._options('color') || this.$elmt.css('background-color'),
                 cover   = this._options('cover') ? 'cover' : 'contain',
+                self    = this,
                 total   = $slides.length,
                 video,
                 img;
@@ -309,14 +311,6 @@
                 }
             }
 
-            if (transition && transition !== 'none' && this.transitions.indexOf(transition) < 0) {
-                console.error("Vegas: Transition " + transition + " doesn't exist.");
-            }
-
-            if (transitionDuration === 'auto' || transitionDuration > delay) {
-                transitionDuration = delay;
-            }
-
             if (animation === 'random' || animation instanceof Array) {
                 if (animation instanceof Array) {
                     animation = this._random(animation);
@@ -325,48 +319,57 @@
                 }
             }
 
+            if (transition && transition !== 'none' && this.transitions.indexOf(transition) < 0) {
+                console.error("Vegas: Transition " + transition + " doesn't exist.");
+            }
+
             if (animation && animation !== 'none' && this.animations.indexOf(animation) < 0) {
                 console.error("Vegas: Animation " + animation + " doesn't exist.");
             }
 
+            if (transitionDuration === 'auto' || transitionDuration > delay) {
+                transitionDuration = delay;
+            }
+
             if (animationDuration === 'auto') {
                 animationDuration = delay;
             }
 
+            $slide = $('<div class="vegas-slide"></div>');
+            
+            if (transition) {
+                $slide.addClass('vegas-transition-' + transition);
+            }
+
             // Video ?
 
             if (this.support.video && videos) {
                 video = this._video(videos);
 
-                $slide = $(video)
+                $video = $(video)
                     .addClass('vegas-video')
-                    .addClass('vegas-slide')
-                    .addClass('vegas-transition-' + transition)
                     .css('background-color', color);
 
                 if (this.support.objectFit) {
-                    $slide
+                    $video
                         .css('object-position', align + ' ' + valign)
                         .css('object-fit', cover)
                         .css('width',  '100%')
                         .css('height', '100%');
                 } else if (cover === 'contain') {
-                    $slide
+                    $video
                         .css('width',  '100%')
                         .css('height', '100%');
                 }
 
+                $slide.append($video);
+
             // Image ?
 
             } else {
                 img = new Image();
 
-                $slide = $('<div></div>')
-                    .addClass('vegas-slide')
-                    .addClass('vegas-transition-' + transition);
-
-                $inner = $('<div></div>')
-                    .addClass('vegas-slide-inner')
+                $inner = $('<div class="vegas-slide-inner"></div>')
                     .css('background-image',    'url(' + src + ')')
                     .css('background-color',    color)
                     .css('background-position', align + ' ' + valign)
@@ -394,13 +397,16 @@
             $slides
                 .css('transition', 'all 0ms')
                 .each(function () {
-                    this.className  = ' vegas-slide';
-                    this.className += ' vegas-transition-' +  transition;
-                    this.className += ' vegas-transition-' +  transition + '-in';
-                    
+                    this.className  = 'vegas-slide';
+
                     if (this.tagName === 'VIDEO') {
                         this.className += ' vegas-video';    
                     }
+
+                    if (transition) {
+                        this.className += ' vegas-transition-' + transition;
+                        this.className += ' vegas-transition-' + transition + '-in';
+                    }
                 }
             );
 
@@ -410,18 +416,18 @@
                 self._timer(true);
 
                 setTimeout(function () {
-                    if (self.support.transition) {
-                        $slides
-                            .css('transition', 'all ' + transitionDuration + 'ms')
-                            .addClass('vegas-transition-' + transition + '-out');
-                    }
-
-                    $slide
-                        .css('transition', 'all ' + transitionDuration + 'ms')
-                        .addClass('vegas-transition-' + transition + '-in');
-
-                    if (!self.support.transition) {
-                        $slide.fadeIn(transitionDuration);
+                    if (transition) {
+                        if (self.support.transition) {
+                            $slides
+                                .css('transition', 'all ' + transitionDuration + 'ms')
+                                .addClass('vegas-transition-' + transition + '-out');
+
+                            $slide
+                                .css('transition', 'all ' + transitionDuration + 'ms')
+                                .addClass('vegas-transition-' + transition + '-in');
+                        } else {
+                            $slide.fadeIn(transitionDuration);
+                        }
                     }
 
                     for (var i = 0; i < $slides.length - 1; i++) {

src/vegas.css

@@ -15,6 +15,7 @@
 }
 
 .vegas-overlay {
+    opacity: .5;
     background: transparent url(overlays/02.png) center center repeat;
 }
 
@@ -37,8 +38,8 @@
 .vegas-slide-inner {
     margin: 0;
     padding: 0;
-    transform: translateZ(0);
     background: transparent center center no-repeat;
+    transform: translateZ(0);
 }
 
 body .vegas-container {

src/vegas.js

@@ -179,10 +179,6 @@
                 if (this.settings.preload || this.settings.preloadVideos) {
                     if (this.support.video && this.settings.slides[i].video) {
                         video = this._video(this.settings.slides[i].video);
-                        video.preload = true;
-                        video.muted = true;
-
-                        videoCache[this.settings.slides[i].video.toString()] = video;
                     }
                 }
             }
@@ -232,10 +228,11 @@
 
         _video: function (srcs) {
             var video, 
-                source;
+                source,
+                cacheKey = srcs.toString();
 
-            if (videoCache[srcs.toString()]) {
-                return videoCache[srcs.toString()];
+            if (videoCache[cacheKey]) {
+                return videoCache[cacheKey];
             }
 
             if (srcs instanceof Array === false) {
@@ -243,6 +240,8 @@
             }
 
             video = document.createElement('video');
+            video.muted = true;
+            video.preload = true;
 
             srcs.forEach(function (src) {
                 source = document.createElement('source');
@@ -250,6 +249,8 @@
                 video.appendChild(source);
             });
 
+            videoCache[cacheKey] = video;
+
             return video;
         },
 
@@ -274,7 +275,7 @@
 
             var $slide,
                 $inner,
-                self    = this,
+                $video,
                 $slides = this.$elmt.children('.vegas-slide'),
                 src     = this.settings.slides[nb].src,
                 videos  = this.settings.slides[nb].video,
@@ -283,6 +284,7 @@
                 valign  = this._options('valign'),
                 color   = this._options('color') || this.$elmt.css('background-color'),
                 cover   = this._options('cover') ? 'cover' : 'contain',
+                self    = this,
                 total   = $slides.length,
                 video,
                 img;
@@ -300,14 +302,6 @@
                 }
             }
 
-            if (transition && transition !== 'none' && this.transitions.indexOf(transition) < 0) {
-                console.error("Vegas: Transition " + transition + " doesn't exist.");
-            }
-
-            if (transitionDuration === 'auto' || transitionDuration > delay) {
-                transitionDuration = delay;
-            }
-
             if (animation === 'random' || animation instanceof Array) {
                 if (animation instanceof Array) {
                     animation = this._random(animation);
@@ -316,48 +310,57 @@
                 }
             }
 
+            if (transition && transition !== 'none' && this.transitions.indexOf(transition) < 0) {
+                console.error("Vegas: Transition " + transition + " doesn't exist.");
+            }
+
             if (animation && animation !== 'none' && this.animations.indexOf(animation) < 0) {
                 console.error("Vegas: Animation " + animation + " doesn't exist.");
             }
 
+            if (transitionDuration === 'auto' || transitionDuration > delay) {
+                transitionDuration = delay;
+            }
+
             if (animationDuration === 'auto') {
                 animationDuration = delay;
             }
 
+            $slide = $('<div class="vegas-slide"></div>');
+            
+            if (transition) {
+                $slide.addClass('vegas-transition-' + transition);
+            }
+
             // Video ?
 
             if (this.support.video && videos) {
                 video = this._video(videos);
 
-                $slide = $(video)
+                $video = $(video)
                     .addClass('vegas-video')
-                    .addClass('vegas-slide')
-                    .addClass('vegas-transition-' + transition)
                     .css('background-color', color);
 
                 if (this.support.objectFit) {
-                    $slide
+                    $video
                         .css('object-position', align + ' ' + valign)
                         .css('object-fit', cover)
                         .css('width',  '100%')
                         .css('height', '100%');
                 } else if (cover === 'contain') {
-                    $slide
+                    $video
                         .css('width',  '100%')
                         .css('height', '100%');
                 }
 
+                $slide.append($video);
+
             // Image ?
 
             } else {
                 img = new Image();
 
-                $slide = $('<div></div>')
-                    .addClass('vegas-slide')
-                    .addClass('vegas-transition-' + transition);
-
-                $inner = $('<div></div>')
-                    .addClass('vegas-slide-inner')
+                $inner = $('<div class="vegas-slide-inner"></div>')
                     .css('background-image',    'url(' + src + ')')
                     .css('background-color',    color)
                     .css('background-position', align + ' ' + valign)
@@ -385,13 +388,16 @@
             $slides
                 .css('transition', 'all 0ms')
                 .each(function () {
-                    this.className  = ' vegas-slide';
-                    this.className += ' vegas-transition-' +  transition;
-                    this.className += ' vegas-transition-' +  transition + '-in';
-                    
+                    this.className  = 'vegas-slide';
+
                     if (this.tagName === 'VIDEO') {
                         this.className += ' vegas-video';    
                     }
+
+                    if (transition) {
+                        this.className += ' vegas-transition-' + transition;
+                        this.className += ' vegas-transition-' + transition + '-in';
+                    }
                 }
             );
 
@@ -401,18 +407,18 @@
                 self._timer(true);
 
                 setTimeout(function () {
-                    if (self.support.transition) {
-                        $slides
-                            .css('transition', 'all ' + transitionDuration + 'ms')
-                            .addClass('vegas-transition-' + transition + '-out');
-                    }
-
-                    $slide
-                        .css('transition', 'all ' + transitionDuration + 'ms')
-                        .addClass('vegas-transition-' + transition + '-in');
-
-                    if (!self.support.transition) {
-                        $slide.fadeIn(transitionDuration);
+                    if (transition) {
+                        if (self.support.transition) {
+                            $slides
+                                .css('transition', 'all ' + transitionDuration + 'ms')
+                                .addClass('vegas-transition-' + transition + '-out');
+
+                            $slide
+                                .css('transition', 'all ' + transitionDuration + 'ms')
+                                .addClass('vegas-transition-' + transition + '-in');
+                        } else {
+                            $slide.fadeIn(transitionDuration);
+                        }
                     }
 
                     for (var i = 0; i < $slides.length - 1; i++) {