Fix #81

src/Fancybox/Fancybox.js

@@ -1385,7 +1385,7 @@ class Fancybox extends Base {
     }
 
     if (!Fancybox.openers.size) {
-      document.body.addEventListener("click", Fancybox.fromEvent, false);
+      document.addEventListener("click", Fancybox.fromEvent, false);
 
       // Pass self to plugins to avoid circular dependencies
       for (const [key, Plugin] of Object.entries(Fancybox.Plugins || {})) {

src/Fancybox/plugins/Html/Html.js

@@ -172,7 +172,7 @@ export class Html {
       if (slide.width && slide.height) {
         slide.ratio = parseFloat(slide.width) / parseFloat(slide.height);
       } else {
-        slide.ratio = slide.ratio || slide.video.ratio;
+        slide.ratio = slide.ratio || slide.video.ratio || defaults.video.ratio;
       }
     }
   }
@@ -509,12 +509,12 @@ export class Html {
    * @param {Object} slide
    */
   playVideo(slide) {
-    if (slide.type === "html5video") {
+    if (slide.type === "html5video" && slide.video.autoplay) {
-      const videoElem = slide.$el.querySelector("video");
+      const $video = slide.$el.querySelector("video");
 
-      if (videoElem) {
+      if ($video) {
         try {
-          videoElem.play();
+          $video.play();
         } catch (err) {}
       }
     }

src/Fancybox/plugins/Toolbar/Toolbar.js

@@ -5,6 +5,12 @@ import { Fullscreen } from "../../../shared/utils/Fullscreen.js";
 import { Slideshow } from "../../../shared/utils/Slideshow.js";
 
 const defaults = {
+  // What toolbar items to display
+  display: ["counter", "zoom", "slideshow", "fullscreen", "thumbs", "close"],
+
+  // Only create a toolbar item if there is at least one image in the group
+  autoEnable: true,
+
   // Toolbar items; can be links, buttons or `div` elements
   items: {
     counter: {
@@ -121,12 +127,6 @@ const defaults = {
       },
     },
   },
-
-  // What toolbar items to display
-  display: ["counter", "zoom", "slideshow", "fullscreen", "thumbs", "close"],
-
-  // Only create a toolbar item if there is at least one image in the group
-  autoEnable: true,
 };
 
 export class Toolbar {

src/shared/utils/canUseDOM.js

@@ -1,9 +1,4 @@
 /**
  * Detect if rendering from the client or the server
  */
-export const canUseDOM = !!(
+export const canUseDOM = !!(typeof window !== "undefined" && window.document && window.document.createElement);
-  typeof window !== "undefined" &&
-  window.document &&
-  window.document.createElement &&
-  window.document.body
-);