3 files changed, 30 insertions, 17 deletions

diff --git a/src/js/plugins/vimeo.js b/src/js/plugins/vimeo.js
index 190dd88c..652c920c 100644
--- a/src/js/plugins/vimeo.js
+++ b/src/js/plugins/vimeo.js
@@ -9,6 +9,9 @@ import utils from './../utils';
 
 // Set playback state and trigger change (only on actual change)
 function assurePlaybackState(play) {
+    if (play && !this.embed.hasPlayed) {
+        this.embed.hasPlayed = true;
+    }
     if (this.media.paused === play) {
         this.media.paused = !play;
         utils.dispatchEvent.call(this, this.media, play ? 'play' : 'pause');
@@ -153,19 +156,20 @@ const vimeo = {
 
                 // Get current paused state and volume etc
                 const { embed, media, paused, volume } = player;
+                const restorePause = paused && !embed.hasPlayed;
 
                 // Set seeking state and trigger event
                 media.seeking = true;
                 utils.dispatchEvent.call(player, media, 'seeking');
 
                 // If paused, mute until seek is complete
-                Promise.resolve(paused && embed.setVolume(0))
+                Promise.resolve(restorePause && embed.setVolume(0))
                     // Seek
                     .then(() => embed.setCurrentTime(time))
                     // Restore paused
-                    .then(() => paused && embed.pause())
+                    .then(() => restorePause && embed.pause())
                     // Restore volume
-                    .then(() => paused && embed.setVolume(volume))
+                    .then(() => restorePause && embed.setVolume(volume))
                     .catch(() => {
                         // Do nothing
                     });
@@ -307,6 +311,14 @@ const vimeo = {
         });
 
         player.embed.on('loaded', () => {
+            // Assure state and events are updated on autoplay
+            player.embed.getPaused().then(paused => {
+                assurePlaybackState.call(player, !paused);
+                if (!paused) {
+                    utils.dispatchEvent.call(player, player.media, 'playing');
+                }
+            });
+
             if (utils.is.element(player.embed.element) && player.supported.ui) {
                 const frame = player.embed.element;
 
diff --git a/src/js/plugins/youtube.js b/src/js/plugins/youtube.js
index 67b8093e..9b067c8a 100644
--- a/src/js/plugins/youtube.js
+++ b/src/js/plugins/youtube.js
@@ -66,6 +66,9 @@ function mapQualityUnits(levels) {
 
 // Set playback state and trigger change (only on actual change)
 function assurePlaybackState(play) {
+    if (play && !this.embed.hasPlayed) {
+        this.embed.hasPlayed = true;
+    }
     if (this.media.paused === play) {
         this.media.paused = !play;
         utils.dispatchEvent.call(this, this.media, play ? 'play' : 'pause');
@@ -469,7 +472,7 @@ const youtube = {
 
                         case 1:
                             // Restore paused state (YouTube starts playing on seek if the video hasn't been played yet)
-                            if (player.media.paused) {
+                            if (player.media.paused && !player.embed.hasPlayed) {
                                 player.media.pause();
                             } else {
                                 assurePlaybackState.call(player, true);
diff --git a/src/js/utils.js b/src/js/utils.js
index a152e121..109de031 100644
--- a/src/js/utils.js
+++ b/src/js/utils.js
@@ -151,24 +151,23 @@ const utils = {
             return;
         }
 
-        const prefix = 'cache-';
+        const prefix = 'cache';
         const hasId = utils.is.string(id);
         let isCached = false;
 
-        const exists = () => document.querySelectorAll(`#${id}`).length;
+        const exists = () => document.getElementById(id) !== null;
+
+        const update = (container, data) => {
+            container.innerHTML = data;
 
-        function injectSprite(data) {
             // Check again incase of race condition
             if (hasId && exists()) {
                 return;
             }
 
-            // Inject content
-            this.innerHTML = data;
-
             // Inject the SVG to the body
-            document.body.insertBefore(this, document.body.childNodes[0]);
-        }
+            document.body.insertAdjacentElement('afterbegin', container);
+        };
 
         // Only load once if ID set
         if (!hasId || !exists()) {
@@ -184,13 +183,12 @@ const utils = {
 
             // Check in cache
             if (useStorage) {
-                const cached = window.localStorage.getItem(prefix + id);
+                const cached = window.localStorage.getItem(`${prefix}-${id}`);
                 isCached = cached !== null;
 
                 if (isCached) {
                     const data = JSON.parse(cached);
-                    injectSprite.call(container, data.content);
-                    return;
+                    update(container, data.content);
                 }
             }
 
@@ -204,14 +202,14 @@ const utils = {
 
                     if (useStorage) {
                         window.localStorage.setItem(
-                            prefix + id,
+                            `${prefix}-${id}`,
                             JSON.stringify({
                                 content: result,
                             }),
                         );
                     }
 
-                    injectSprite.call(container, result);
+                    update(container, result);
                 })
                 .catch(() => {});
         }