https://www.padoetinchem.nl/Scripts/app/iframeResize.js

1
2$(document).ready(
3	function () {
4		var debounced = null;
5
6		var resizeVars = {};
7
8		function startResizing() {
9			// Find all YouTube videos
10			resizeVars.$allVideos = $("iframe[src^='https://www.youtube.com']"),
11
12			// The element that is fluid width
13			resizeVars.$fluidEl = $("body");
14
15			// Figure out and save aspect ratio for each video
16			resizeVars.$allVideos.each(function () {
17
18				$(this)
19					.data('aspectRatio', this.height / this.width)
20
21					// and remove the hard coded width/height
22					.removeAttr('height')
23					.removeAttr('width')
24					.wrap("<div class='youtube-frame'></div>");
25			});
26
27			$(window).on('resize', function () {
28				if (debounced !== null) {
29					clearTimeout(debounced);
30					debounced = null;
31				}
32			
33				debounced = setTimeout(onResize, 50);
34			});
35
36			onResize();
37		}
38
39		function onResize() {
40			debounced = null;
41			//var newWidth = resizeVars.$fluidEl.width();
42
43			// Resize all videos according to their own aspect ratio
44			resizeVars.$allVideos.each(function () {
45				//height is currently not always working
46				var $el = $(this);
47				var newWidth = $el.parent().width();
48
49				
50				$el
51					.width(newWidth)
52					.height(newWidth * $el.data('aspectRatio'));
53
54			});
55
56			// Kick off one resize to fix all videos on page load
57		}
58
59		startResizing();
60
61	}
62		);