cferdinandi · October 19, 2020 14:36
diff --git a/fitvids-vanilla.html b/fitvids-vanilla.html
 <!DOCTYPE html>
 <html>
 <head>
 	<title>Vanilla Fitvids.js</title>

 	<style type="text/css">
 		body {
 			margin: 0 auto;
 			max-width: 40em;
 			width: 88%;
 		}

 		iframe {
 			max-width: 100%;
 			width: 100%;
 		}

 		.fitvids {
 			margin-bottom: 1.5em;
 		}
 	</style>
 </head>
 <body>

 	<h1>Vanilla Fitvids.js</h1>

 	<iframe width="560" height="315" src="https://www.youtube.com/embed/KC0pfCv4A0Y" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>


 	<script>
 		/**
 		 * Vanilla JS fork of fitVids.js by Dave Rupert
 		 * https://github.com/davatron5000/FitVids.js
 		 *
 		 * (c) 2020 Chris Ferdinandi, MIT License, https://gomakethings.com
 		 */
 		var FitVids = (function () {

 			'use strict';

 			/**
 			 * Create the Constructor object
 			 */
 			var Constructor = function (selectors) {

 				//
 				// Variables
 				//

 				// Default video players
 				var defaults = 'iframe[src*="player.vimeo.com"], iframe[src*="youtube.com"]';

 				// Public APIs object
 				var publicAPIs = {};

 				// Placeholder for video elements
 				var vids;


 				//
 				// Methods
 				//

 				/**
 				 * Inject video resizing styles
 				 * https://github.com/toddmotto/fluidvids/blob/master/dist/fluidvids.js
 				 */
 				var addStyles = function () {

 					// Don't run if there are already styles on the page
 					if (document.querySelector('#fitvids-styles')) return;

 					// Get the head element
 					var head = document.head || document.getElementsByTagName('head')[0];

 					// Create styles
 					var css = '.fitvids{width:100%;position:relative;padding:0;}.fitvids iframe,.fitvids object,.fitvids embed {position:absolute;top:0;left:0;width:100%;height:100%;}';
 					var div = document.createElement('div');
 					div.innerHTML = '<p>x</p><style id="fitvids-styles">' + css + '</style>';

 					// Inject styles into the DOM
 					head.appendChild(div.childNodes[1]);

 				};

 				/**
 				 * Wrap videos in wrapper element
 				 */
 				var wrapVids = function () {

 					vids.forEach(function (vid) {

 						// Don't run on existing fitvids wrapped content
 						if ((vid.tagName.toLowerCase() === 'embed' && vid.closest('object')) || vid.closest('.fitvids')) return;

 						// Get properties
 						var height = parseFloat(vid.height);
 						var width = parseFloat(vid.width);

 						// Don't run if there's no valid height or width properties
 						if (!height || !width || isNaN(height) || isNaN(width)) return;

 						// Create wrapper
 						var wrapper = document.createElement('div');
 						wrapper.className = 'fitvids';
 						wrapper.style.paddingTop = ((height / width) * 100)  + '%';

 						// Wrap the video and inject back into the DOM
 						vid.parentNode.insertBefore(wrapper, vid);
 						wrapper.appendChild(vid);


 					});
 				};

 				/**
 				 * Initialize plugin
 				 */
 				var init = function () {

 					// Get the video elements
 					// If custom selectors were provided, use them
 					// Otherwise, use defaults
 					vids = Array.from(document.querySelectorAll(selectors || defaults));

 					// If there are no matching videos, bail
 					if (!vids.length) return;

 					// Add wrapper styles
 					addStyles();

 					// Wrap videos
 					wrapVids();

 				};

 				/**
 				 * Re-render videos if DOM is updated
 				 */
 				publicAPIs.render = function () {
 					init();
 				};


 				//
 				// Initialize the instance and return the Public APIs
 				//

 				init();
 				return publicAPIs;

 			};


 			//
 			// Return the Constructor
 			//

 			return Constructor;

 		})();

 		var videos = new FitVids();

 		// Add a new video after running FitVids
 		var div = document.createElement('div');
 		div.innerHTML = '<iframe width="425" height="349" src="http://www.youtube.com/embed/FKWwdQu6_ok" frameborder="0" allowfullscreen></iframe>';
 		document.body.appendChild(div);

 		videos.render();

 	</script>

 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Vanilla Fitvids.js</title>

	<style type="text/css">
	body {
	margin: 0 auto;
	max-width: 40em;
	width: 88%;
	}

	iframe {
	max-width: 100%;
	width: 100%;
	}

	.fitvids {
	margin-bottom: 1.5em;
	}
	</style>
	</head>
	<body>

	<h1>Vanilla Fitvids.js</h1>

	<iframe width="560" height="315" src="https://www.youtube.com/embed/KC0pfCv4A0Y" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>


	<script>
	/**
	* Vanilla JS fork of fitVids.js by Dave Rupert
	* https://github.com/davatron5000/FitVids.js
	*
	* (c) 2020 Chris Ferdinandi, MIT License, https://gomakethings.com
	*/
	var FitVids = (function () {

	'use strict';

	/**
	* Create the Constructor object
	*/
	var Constructor = function (selectors) {

	//
	// Variables
	//

	// Default video players
	var defaults = 'iframe[src="player.vimeo.com"], iframe[src="youtube.com"]';

	// Public APIs object
	var publicAPIs = {};

	// Placeholder for video elements
	var vids;


	//
	// Methods
	//

	/**
	* Inject video resizing styles
	* https://github.com/toddmotto/fluidvids/blob/master/dist/fluidvids.js
	*/
	var addStyles = function () {

	// Don't run if there are already styles on the page
	if (document.querySelector('#fitvids-styles')) return;

	// Get the head element
	var head = document.head \|\| document.getElementsByTagName('head')[0];

	// Create styles
	var css = '.fitvids{width:100%;position:relative;padding:0;}.fitvids iframe,.fitvids object,.fitvids embed {position:absolute;top:0;left:0;width:100%;height:100%;}';
	var div = document.createElement('div');
	div.innerHTML = '<p>x</p><style id="fitvids-styles">' + css + '</style>';

	// Inject styles into the DOM
	head.appendChild(div.childNodes[1]);

	};

	/**
	* Wrap videos in wrapper element
	*/
	var wrapVids = function () {

	vids.forEach(function (vid) {

	// Don't run on existing fitvids wrapped content
	if ((vid.tagName.toLowerCase() === 'embed' && vid.closest('object')) \|\| vid.closest('.fitvids')) return;

	// Get properties
	var height = parseFloat(vid.height);
	var width = parseFloat(vid.width);

	// Don't run if there's no valid height or width properties
	if (!height \|\| !width \|\| isNaN(height) \|\| isNaN(width)) return;

	// Create wrapper
	var wrapper = document.createElement('div');
	wrapper.className = 'fitvids';
	wrapper.style.paddingTop = ((height / width) * 100) + '%';

	// Wrap the video and inject back into the DOM
	vid.parentNode.insertBefore(wrapper, vid);
	wrapper.appendChild(vid);


	});
	};

	/**
	* Initialize plugin
	*/
	var init = function () {

	// Get the video elements
	// If custom selectors were provided, use them
	// Otherwise, use defaults
	vids = Array.from(document.querySelectorAll(selectors \|\| defaults));

	// If there are no matching videos, bail
	if (!vids.length) return;

	// Add wrapper styles
	addStyles();

	// Wrap videos
	wrapVids();

	};

	/**
	* Re-render videos if DOM is updated
	*/
	publicAPIs.render = function () {
	init();
	};


	//
	// Initialize the instance and return the Public APIs
	//

	init();
	return publicAPIs;

	};


	//
	// Return the Constructor
	//

	return Constructor;

	})();

	var videos = new FitVids();

	// Add a new video after running FitVids
	var div = document.createElement('div');
	div.innerHTML = '<iframe width="425" height="349" src="http://www.youtube.com/embed/FKWwdQu6_ok" frameborder="0" allowfullscreen></iframe>';
	document.body.appendChild(div);

	videos.render();

	</script>

	</body>
	</html>