MediaWiki:Featured-video.js: Difference between revisions

Latest revision as of 19:47, 6 June 2026

(function () {
  'use strict';

  function resizeVideo(figure) {
    var wrapper = figure.querySelector('.embedvideo-wrapper');
    var config;

    if (!wrapper) {
      return;
    }

    try {
      config = JSON.parse(figure.getAttribute('data-iframeconfig') || '{}');
    } catch (error) {
      return;
    }

    if (!(config.width > 0 && config.height > 0)) {
      return;
    }

    wrapper.style.height =
      (figure.clientWidth * config.height / config.width) + 'px';
  }

  function resizeVideos(root) {
    root.querySelectorAll('figure.embedvideo').forEach(resizeVideo);
  }

  mw.hook('wikipage.content').add(function ($content) {
    resizeVideos($content[0]);
  });

  window.addEventListener('resize', function () {
    resizeVideos(document);
  });
}());

@@ Line 2: / Line 2: @@
    'use strict';
-   var observedWrappers = new WeakSet();
+   function resizeVideo(figure) {
-  var resizeObserver = 'ResizeObserver' in window
+     var wrapper = figure.querySelector('.embedvideo-wrapper');
-    ? new ResizeObserver(function (entries) {
+     var config;
-        entries.forEach(function (entry) {
-          resizeWrapper(entry.target);
-        });
-      })
-     : null;
-  var mutationObserver = new MutationObserver(function (mutations) {
-    mutations.forEach(function (mutation) {
-      resizeWrapper(mutation.target.closest('.embedvideo-wrapper'));
-     });
-  });
-  function getAspectRatio(wrapper) {
-    var container = wrapper.closest('.featured-video');
-    var value = container
-      ? container.getAttribute('data-aspect-ratio')
-      : null;
-    var parts = value ? value.split('/') : [];
-    var width = Number(parts[0]);
-    var height = Number(parts[1]);
-    return width > 0 && height > 0 ? width / height : 16 / 9;
-  }
-  function resizeWrapper(wrapper) {
      if (!wrapper) {
        return;
      }
-     wrapper.style.width = '100%';
+     try {
-    wrapper.style.maxWidth = '100%';
+      config = JSON.parse(figure.getAttribute('data-iframeconfig') || '{}');
+     } catch (error) {
-    var width = wrapper.getBoundingClientRect().width;
-     if (width <= 0) {
        return;
      }
-    var height = width / getAspectRatio(wrapper);
+     if (!(config.width > 0 && config.height > 0)) {
-     if (Math.abs(wrapper.getBoundingClientRect().height - height) > 0.5) {
+       return;
-       wrapper.style.height = height + 'px';
      }
-     wrapper.querySelectorAll('iframe, img').forEach(function (element) {
+     wrapper.style.height =
-      element.style.display = 'block';
+       (figure.clientWidth * config.height / config.width) + 'px';
-      element.style.width = '100%';
-       element.style.height = '100%';
-      element.style.maxWidth = '100%';
-      if (element.tagName === 'IMG') {
-        element.style.objectFit = 'contain';
-      }
-    });
    }
-   function initialise(root) {
+   function resizeVideos(root) {
-     root.querySelectorAll('.featured-video .embedvideo-wrapper').forEach(
+     root.querySelectorAll('figure.embedvideo').forEach(resizeVideo);
-      function (wrapper) {
-        resizeWrapper(wrapper);
-        if (!observedWrappers.has(wrapper)) {
-          observedWrappers.add(wrapper);
-          if (resizeObserver) {
-            resizeObserver.observe(wrapper);
-          }
-          mutationObserver.observe(wrapper, {
-            childList: true,
-            subtree: true
-          });
-        }
-      }
-    );
    }
    mw.hook('wikipage.content').add(function ($content) {
-     initialise($content[0]);
+     resizeVideos($content[0]);
    });
-   if (!resizeObserver) {
+   window.addEventListener('resize', function () {
-    window.addEventListener('resize', function () {
+    resizeVideos(document);
-      initialise(document);
+  });
-    });
-  }
 }());