Rene-Sackers/fbembed.html

## fbembed.html
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>Document</title>

		<style>
			html, body {
				width: 100vw;
				height: 100vh;
			}

			body {
				margin: 0;
				padding: 0;
				overflow: hidden;
				text-align: center;
				display: flex;
				justify-content: center;
				align-items: center;
				background: #000;
			}

			iframe {
				border: 0;
			}
		</style>
	</head>
	<body>
		<!--
			Usage:
			Add the video URL behind the HTML file after a ?
			Example:
			http://example.com/fbembed.html?https://www.facebook.com/ESLOneCSGO/videos/1892320017477858/?q=esl%20one%20csgo
		-->
		<script>
			var videoUrl = document.location.search.substring(1);
			videoUrl = encodeURIComponent(videoUrl);
			videoUrl = "https://www.facebook.com/plugins/video.php?href=" + videoUrl;

			var iframe = document.createElement("iframe");
			iframe.src = videoUrl;
			iframe.allowFullscreen = "true";
			document.body.appendChild(iframe);

			function resizeIframe() {
				var windowRelativeWidth = window.innerWidth / 16;
				var windowRelativeHeight = window.innerHeight / 9;

				var useHeightAsBase = windowRelativeWidth > windowRelativeHeight;

				if (useHeightAsBase) {
					iframe.style.width = windowRelativeHeight * 16 + "px";
					iframe.style.height = windowRelativeHeight * 9 + "px";
				} else {
					iframe.style.width = windowRelativeWidth * 16 + "px";
					iframe.style.height = windowRelativeWidth * 9 + "px";
				}
			}

			window.addEventListener("resize", resizeIframe);
			resizeIframe();
		</script>
	</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>

	<style>
	html, body {
	width: 100vw;
	height: 100vh;
	}

	body {
	margin: 0;
	padding: 0;
	overflow: hidden;
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
	background: #000;
	}

	iframe {
	border: 0;
	}
	</style>
	</head>
	<body>
	<!--
	Usage:
	Add the video URL behind the HTML file after a ?
	Example:
	http://example.com/fbembed.html?https://www.facebook.com/ESLOneCSGO/videos/1892320017477858/?q=esl%20one%20csgo
	-->
	<script>
	var videoUrl = document.location.search.substring(1);
	videoUrl = encodeURIComponent(videoUrl);
	videoUrl = "https://www.facebook.com/plugins/video.php?href=" + videoUrl;

	var iframe = document.createElement("iframe");
	iframe.src = videoUrl;
	iframe.allowFullscreen = "true";
	document.body.appendChild(iframe);

	function resizeIframe() {
	var windowRelativeWidth = window.innerWidth / 16;
	var windowRelativeHeight = window.innerHeight / 9;

	var useHeightAsBase = windowRelativeWidth > windowRelativeHeight;

	if (useHeightAsBase) {
	iframe.style.width = windowRelativeHeight * 16 + "px";
	iframe.style.height = windowRelativeHeight * 9 + "px";
	} else {
	iframe.style.width = windowRelativeWidth * 16 + "px";
	iframe.style.height = windowRelativeWidth * 9 + "px";
	}
	}

	window.addEventListener("resize", resizeIframe);
	resizeIframe();
	</script>
	</body>
	</html>