Allow to set width/height for video and iframe

src/Fancybox/Fancybox.js

@@ -108,6 +108,14 @@ class Fancybox extends Base {
    * @param {Object} [options] - Options for Fancybox
    */
   constructor(items, options = {}) {
+    // Quick hack to fix variable naming collision
+    items = items.map((item) => {
+      if (item.width) item._width = item.width;
+      if (item.height) item._height = item.height;
+
+      return item;
+    });
+
     super(extend(true, {}, defaults, options));
 
     this.bindHandlers();

tests/4_fancybox_test.js

@@ -747,6 +747,52 @@ describe("Fancybox", function () {
     instance.close();
   });
 
+  it("can display video with custom dimensions", async function () {
+    Fancybox.show([
+      {
+        src: "https://www.youtube.com/watch?v=DLX62G4lc44",
+        type: "video",
+        width: 300,
+        height: 200,
+      },
+    ]);
+
+    await delay(300);
+
+    const rect = Fancybox.getInstance().getSlide().$content.getBoundingClientRect();
+
+    expect(rect.width).to.be.equal(300);
+    expect(rect.height).to.be.equal(200);
+
+    Fancybox.getInstance().close();
+  });
+
+  it("can display iframe with custom dimensions", async function () {
+    Fancybox.show(
+      [
+        {
+          src: "https://www.w3.org/",
+          type: "iframe",
+          width: 300,
+          height: 200,
+          preload: false,
+        },
+      ],
+      {
+        animated: false,
+        showClass: false,
+        hideClass: false,
+      }
+    );
+
+    const rect = Fancybox.getInstance().getSlide().$content.getBoundingClientRect();
+
+    expect(rect.width).to.be.equal(300);
+    expect(rect.height).to.be.equal(200);
+
+    Fancybox.getInstance().close();
+  });
+
   it("can load HTML content using ajax", async function () {
     const instance = new Fancybox([
       {