Bugfixes

src/Fancybox/Fancybox.js

@@ -1251,17 +1251,23 @@ class Fancybox extends Base {
       .some((opener) => {
         target = eventTarget;
 
-        // Chain closest() to event.target to find and return the parent element,
-        // regardless if clicking on the child elements (icon, label, etc)
-        if (!(target.matches(opener) || (target = target.closest(opener)))) {
-          return;
-        }
+        let found = false;
 
-        event.preventDefault();
+        try {
+          if (target instanceof Element && (typeof opener === "string" || opener instanceof String)) {
+            // Chain closest() to event.target to find and return the parent element,
+            // regardless if clicking on the child elements (icon, label, etc)
+            found = target.matches(opener) || (target = target.closest(opener));
+          }
+        } catch (error) {}
 
-        matchingOpener = opener;
+        if (found) {
+          event.preventDefault();
+          matchingOpener = opener;
+          return true;
+        }
 
-        return true;
+        return false;
       });
 
     let rez = false;
@@ -1300,10 +1306,17 @@ class Fancybox extends Base {
       const falseValues = ["false", "0", "no", "null", "undefined"];
       const trueValues = ["true", "1", "yes"];
 
-      const options = Object.assign({}, el.dataset);
+      const dataset = Object.assign({}, el.dataset);
+      const options = {};
 
-      for (let [key, value] of Object.entries(options)) {
-        if (typeof value === "string" || value instanceof String) {
+      for (let [key, value] of Object.entries(dataset)) {
+        if (key === "fancybox") {
+          continue;
+        }
+
+        if (key === "width" || key === "height") {
+          options[`_${key}`] = value;
+        } else if (typeof value === "string" || value instanceof String) {
           if (falseValues.indexOf(value) > -1) {
             options[key] = false;
           } else if (trueValues.indexOf(options[key]) > -1) {
@@ -1315,12 +1328,11 @@ class Fancybox extends Base {
               options[key] = value;
             }
           }
+        } else {
+          options[key] = value;
         }
       }
 
-      delete options.fancybox;
-      delete options.type;
-
       if (el instanceof Element) {
         options.$trigger = el;
       }

src/Fancybox/plugins/Hash/Hash.js

@@ -233,15 +233,15 @@ export class Hash {
       Hash.startFromUrl();
     }
 
-    window.requestAnimationFrame(() => {
-      if (canUseDOM) {
+    if (canUseDOM) {
+      window.requestAnimationFrame(() => {
         if (/complete|interactive|loaded/.test(document.readyState)) {
           proceed();
         } else {
           document.addEventListener("DOMContentLoaded", proceed);
         }
-      }
-    });
+      });
+    }
   }
 
   static destroy() {

src/Fancybox/plugins/Html/Html.js

@@ -169,8 +169,8 @@ export class Html {
     if (type === "html5video" || type === "video") {
       slide.video = extend({}, this.fancybox.option("Html.video"), slide.video);
 
-      if (slide.width && slide.height) {
-        slide.ratio = parseFloat(slide.width) / parseFloat(slide.height);
+      if (slide._width && slide._height) {
+        slide.ratio = parseFloat(slide._width) / parseFloat(slide._height);
       } else {
         slide.ratio = slide.ratio || slide.video.ratio || defaults.video.ratio;
       }
@@ -344,36 +344,52 @@ export class Html {
    * @param {Object} slide
    */
   setAspectRatio(slide) {
-    let ratio = slide.ratio;
+    const $content = slide.$content;
+    const ratio = slide.ratio;
 
-    if (!ratio || !slide.$content) {
+    if (!$content) {
       return;
     }
 
-    slide.$content.style.maxWidth = "";
-    slide.$content.style.maxHeight = "";
+    let width = slide._width;
+    let height = slide._height;
 
-    let width = slide.$content.offsetWidth;
-    let height = slide.$content.offsetHeight;
+    if (ratio || (width && height)) {
+      Object.assign($content.style, {
+        width: width && height ? "100%" : "",
+        height: width && height ? "100%" : "",
+        maxWidth: "",
+        maxHeight: "",
+      });
 
-    let maxWidth = slide.width;
-    let maxHeight = slide.height;
+      let maxWidth = $content.offsetWidth;
+      let maxHeight = $content.offsetHeight;
 
-    if (maxWidth && maxHeight && (width > maxWidth || height > maxHeight)) {
-      let maxRatio = Math.min(maxWidth / width, maxHeight / height);
+      width = width || maxWidth;
+      height = height || maxHeight;
 
-      width = width * maxRatio;
-      height = height * maxRatio;
-    }
+      // Resize to fit
+      if (width > maxWidth || height > maxHeight) {
+        let maxRatio = Math.min(maxWidth / width, maxHeight / height);
 
-    if (ratio < width / height) {
-      width = height * ratio;
-    } else {
-      height = width / ratio;
-    }
+        width = width * maxRatio;
+        height = height * maxRatio;
+      }
 
-    slide.$content.style.maxWidth = `${width}px`;
-    slide.$content.style.maxHeight = `${height}px`;
+      // Recheck ratio
+      if (Math.abs(width / height - ratio) > 0.01) {
+        if (ratio < width / height) {
+          width = height * ratio;
+        } else {
+          height = width / ratio;
+        }
+      }
+
+      Object.assign($content.style, {
+        width: `${width}px`,
+        height: `${height}px`,
+      });
+    }
   }
 
   /**