MediaWiki:Featured-video.js

Note: After publishing, you may have to bypass your browser's cache to see the changes.

Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.

(function () {
  'use strict';

  var observedWrappers = new WeakSet();
  var resizeObserver = 'ResizeObserver' in window
    ? new ResizeObserver(function (entries) {
        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%';
    wrapper.style.maxWidth = '100%';

    var width = wrapper.getBoundingClientRect().width;
    if (width <= 0) {
      return;
    }

    var height = width / getAspectRatio(wrapper);
    if (Math.abs(wrapper.getBoundingClientRect().height - height) > 0.5) {
      wrapper.style.height = height + 'px';
    }

    wrapper.querySelectorAll('iframe, img').forEach(function (element) {
      element.style.display = 'block';
      element.style.width = '100%';
      element.style.height = '100%';
      element.style.maxWidth = '100%';

      if (element.tagName === 'IMG') {
        element.style.objectFit = 'contain';
      }
    });
  }

  function initialise(root) {
    root.querySelectorAll('.featured-video .embedvideo-wrapper').forEach(
      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]);
  });

  if (!resizeObserver) {
    window.addEventListener('resize', function () {
      initialise(document);
    });
  }
}());