MediaWiki:Gadget-VideoResizer.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)
Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
Opera: Press Ctrl-F5.

/* Automatically resize videos to fit the page width */

function videoResizer() {
	$('video').each(function() {
		var body = $('#mw-content-text .mw-parser-output');
		var self = $(this);
		if (typeof self.attr('data-orig-width') == 'undefined') {
			self.attr('data-orig-width', self.width());
			self.attr('data-orig-height', self.height());
		}
		if (body.width() < self.attr('data-orig-width')) {
			var aspect = self.attr('data-orig-width') / self.attr('data-orig-height');
			var newWidth = Math.ceil(body.width());
			var newHeight = Math.floor(body.width() / aspect);
			self.css('width', newWidth);
			self.css('height', newHeight);
		}
	});
}
function videoJsResizer() {
	$('.video-js').each(function() {
		var body = $('#mw-content-text .mw-parser-output');
		var self = $(this);
		var video = self.find('video');
		video.removeAttr('style');
		if (body.width() < video.attr('data-orig-width')) {
			var aspect = video.attr('data-orig-width') / video.attr('data-orig-height');
			var newWidth = Math.ceil(body.width());
			var newHeight = Math.floor(body.width() / aspect);
			self.css('width', newWidth);
			self.css('height', newHeight);
		} else if (self.width() != video.attr('data-orig-width')) {
			self.css('width', video.attr('data-orig-width'));
			self.css('height', video.attr('data-orig-height'));
		}
	});
}
function youtubeResizer() {
	$('.autoResize').each(function(){
		var body = $('#mw-content-text .mw-parser-output');
		var self = $(this);
		var iframe = self.find('iframe');
		if (typeof iframe.attr('data-orig-width') == 'undefined') {
			iframe.attr('data-orig-width', iframe.width());
			iframe.attr('data-orig-height', iframe.height());
		}
		if (body.width() < iframe.attr('data-orig-width')) {
			var aspect = iframe.attr('data-orig-width') / iframe.attr('data-orig-height');
			var newWidth = Math.ceil(body.width());
			var newHeight = Math.floor(body.width() / aspect);
			self.css('width', newWidth);
			iframe.attr('width', newWidth);
			iframe.attr('height', newHeight);
		} else if (iframe.width() != iframe.attr('data-orig-width')) {
			self.css('width', iframe.attr('data-orig-width'));
			iframe.attr('width', iframe.attr('data-orig-width'));
			iframe.attr('height', iframe.attr('data-orig-height'));
		}
	});
}
$(videoResizer);
$(youtubeResizer);
$(window).resize(function() {
	clearTimeout(window.resizeFinished);
	window.resizeFinished = setTimeout(function() {
		$(videoJsResizer);
		$(youtubeResizer);
	}, 100);
});

/* Loop uploaded videos under 15 seconds long */
$(function() {
	$('video').each(function() {
		if ($(this).attr('data-durationhint') < 15)
			$(this).attr('loop', '');
	});
});