4 files changed, 18 insertions, 5 deletions
diff --git a/src/js/plyr.d.ts b/src/js/plyr.d.ts
index 357bb687..572ed2da 100644
--- a/src/js/plyr.d.ts
+++ b/src/js/plyr.d.ts
@@ -566,7 +566,7 @@ declare namespace Plyr {
 
   interface PreviewThumbnailsOptions {
     enabled?: boolean;
-    src?: string;
+    src?: string | string[];
   }
 
   interface SourceInfo {
diff --git a/src/js/plyr.js b/src/js/plyr.js
index e924ac78..f2eb3afb 100644
--- a/src/js/plyr.js
+++ b/src/js/plyr.js
@@ -12,6 +12,7 @@ import { getProviderByUrl, providers, types } from './config/types';
 import Console from './console';
 import controls from './controls';
 import Fullscreen from './fullscreen';
+import html5 from './html5';
 import Listeners from './listeners';
 import media from './media';
 import Ads from './plugins/ads';
@@ -308,7 +309,7 @@ class Plyr {
 
     // Autoplay if required
     if (this.isHTML5 && this.config.autoplay) {
-      setTimeout(() => silencePromise(this.play()), 10);
+      this.once('canplay', () => silencePromise(this.play()));
     }
 
     // Seek time will be recorded (in listeners.js) so we can prevent hiding controls for a few seconds after seek
@@ -1054,7 +1055,12 @@ class Plyr {
       const hiding = toggleClass(this.elements.container, this.config.classNames.hideControls, force);
 
       // Close menu
-      if (hiding && is.array(this.config.controls) && this.config.controls.includes('settings') && !is.empty(this.config.settings)) {
+      if (
+        hiding &&
+        is.array(this.config.controls) &&
+        this.config.controls.includes('settings') &&
+        !is.empty(this.config.settings)
+      ) {
         controls.toggleMenu.call(this, false);
       }
 
@@ -1140,6 +1146,9 @@ class Plyr {
         // Unbind listeners
         unbindListeners.call(this);
 
+        // Cancel current network requests
+        html5.cancelRequests.call(this);
+
         // Replace the container with the original element provided
         replaceElement(this.elements.original, this.elements.container);
 
diff --git a/src/js/ui.js b/src/js/ui.js
index d3d6fd69..fd27e2bc 100644
--- a/src/js/ui.js
+++ b/src/js/ui.js
@@ -270,7 +270,7 @@ const ui = {
     // Loop through values (as they are the keys when the object is spread 🤔)
     Object.values({ ...this.media.style })
       // We're only fussed about Plyr specific properties
-      .filter(key => !is.empty(key) && key.startsWith('--plyr'))
+      .filter(key => !is.empty(key) && is.string(key) && key.startsWith('--plyr'))
       .forEach(key => {
         // Set on the container
         this.elements.container.style.setProperty(key, this.media.style.getPropertyValue(key));
diff --git a/src/js/utils/style.js b/src/js/utils/style.js
index c2004fcb..aa57505e 100644
--- a/src/js/utils/style.js
+++ b/src/js/utils/style.js
@@ -68,7 +68,11 @@ export function setAspectRatio(input) {
     const height = (100 / this.media.offsetWidth) * parseInt(window.getComputedStyle(this.media).paddingBottom, 10);
     const offset = (height - padding) / (height / 50);
 
-    this.media.style.transform = `translateY(-${offset}%)`;
+    if(this.fullscreen.active) {
+      wrapper.style.paddingBottom = null;
+    } else {
+      this.media.style.transform = `translateY(-${offset}%)`;
+    }
   } else if (this.isHTML5) {
     wrapper.classList.toggle(this.config.classNames.videoFixedRatio, ratio !== null);
   }