dlford/example.html

## example.html
<html>
	<head>
		<style>
			:where(.modal) {
				margin: 0;
				padding: 0;
				inline-size: 100%;
				max-inline-size: 100%;
				block-size: 100%;
				max-block-size: 100%;
				border: none;
				background-color: #252521;
				border-radius: 0;
				cursor: pointer;
			}

			:where(dialog.modal) {
				display: block !important;
				height: 0;
				opacity: 0;
			}

			:where(dialog.modal[open]) {
				height: unset;
				opacity: 1;
			}

			:where(.modal[open] .inner) {
				display: grid;
				padding: 0;
				grid-template-rows: auto 1fr auto;
				inline-size: 100%;
				max-inline-size: 100%;
				block-size: 100%;
				max-block-size: 100%;
			}

			:where(.modal[open] .inner-inner) {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 100vw;
				container-type: inline-size;
			}

			:where(.modal[open] .inner-inner .inner-button-wrapper) {
				position: relative;
				height: fit-content;
				margin: 5% auto auto auto !important;
				width: 90%;
				max-width: 90% !important;
				cursor: default;
			}

			@container (min-width: 1100px) {
				:where(.modal[open] .inner-inner .inner-button-wrapper) {
					margin: auto !important;
					max-width: 60% !important;
				}
			}

			@container (min-width: 1700px) {
				:where(.modal[open] .inner-inner .inner-button-wrapper) {
					max-width: 1100px !important;
				}
			}

			:where(.modal[open] form) {
				margin: 2% 2% 2% auto;
				width: fit-content;
			}

			:where(.modal[open] form button) {
				width: 50px;
				height: 50px;
				border-radius: 50%;
				color: #f8fafb;
				background-color: #121210;
			}
		</style>
	</head>
	<body>
		<button id="show-dialog">Show Dialog</button>
		<dialog
			class="modal"
			role="presentation"
			id="dialog">
			<div class="inner">
				<form method="dialog">
					<button
						id="close-btn"
						aria-label="Close Modal Button">
						Close
					</button>
				</form>
				<div class="inner-inner">
					<div
						class="inner-btn-wrapper"
						aria-label="Content Wrapper"
						aria-hidden
						role="button"
						onClick="(event) => event.stopPropagation()">
						<iframe
							width="560"
							height="315"
							src="https://www.youtube.com/embed/VkyD-56VVZg?si=dunaf2OAtjDuPWfm"
							title="YouTube video player"
							frameborder="0"
							allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
							allowfullscreen></iframe>
					</div>
				</div>
			</div>
		</dialog>
		<script type="text/javascript">
			const dialog = document.getElementById('dialog');
			const showDialogButton = document.getElementById('show-dialog');
			const closeBtn = document.getElementById('close-btn');

			function handleKeyDown(event) {
				console.log(event.key, dialog.open);
				if (event.key === 'Escape') {
					event.preventDefault();
					if (dialog.open) {
						dialog.close();
						dialog.classList.remove('open');
						document.removeEventListener('keydown', handleKeyDown);
					}
				}
			}
			document.addEventListener('keydown', handleKeyDown);

			let pointer = {
				x: 0,
				y: 0,
			};

			showDialogButton.addEventListener('click', () => {
				dialog.showModal();
				dialog.classList.add('open');
			});

			closeBtn.addEventListener('click', () => {
				dialog.close();
				dialog.classList.remove('open');
			});
		</script>
	</body>
</html>
	<html>
	<head>
	<style>
	:where(.modal) {
	margin: 0;
	padding: 0;
	inline-size: 100%;
	max-inline-size: 100%;
	block-size: 100%;
	max-block-size: 100%;
	border: none;
	background-color: #252521;
	border-radius: 0;
	cursor: pointer;
	}

	:where(dialog.modal) {
	display: block !important;
	height: 0;
	opacity: 0;
	}

	:where(dialog.modal[open]) {
	height: unset;
	opacity: 1;
	}

	:where(.modal[open] .inner) {
	display: grid;
	padding: 0;
	grid-template-rows: auto 1fr auto;
	inline-size: 100%;
	max-inline-size: 100%;
	block-size: 100%;
	max-block-size: 100%;
	}

	:where(.modal[open] .inner-inner) {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100vw;
	container-type: inline-size;
	}

	:where(.modal[open] .inner-inner .inner-button-wrapper) {
	position: relative;
	height: fit-content;
	margin: 5% auto auto auto !important;
	width: 90%;
	max-width: 90% !important;
	cursor: default;
	}

	@container (min-width: 1100px) {
	:where(.modal[open] .inner-inner .inner-button-wrapper) {
	margin: auto !important;
	max-width: 60% !important;
	}
	}

	@container (min-width: 1700px) {
	:where(.modal[open] .inner-inner .inner-button-wrapper) {
	max-width: 1100px !important;
	}
	}

	:where(.modal[open] form) {
	margin: 2% 2% 2% auto;
	width: fit-content;
	}

	:where(.modal[open] form button) {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	color: #f8fafb;
	background-color: #121210;
	}
	</style>
	</head>
	<body>
	<button id="show-dialog">Show Dialog</button>
	<dialog
	class="modal"
	role="presentation"
	id="dialog">
	<div class="inner">
	<form method="dialog">
	<button
	id="close-btn"
	aria-label="Close Modal Button">
	Close
	</button>
	</form>
	<div class="inner-inner">
	<div
	class="inner-btn-wrapper"
	aria-label="Content Wrapper"
	aria-hidden
	role="button"
	onClick="(event) => event.stopPropagation()">
	<iframe
	width="560"
	height="315"
	src="https://www.youtube.com/embed/VkyD-56VVZg?si=dunaf2OAtjDuPWfm"
	title="YouTube video player"
	frameborder="0"
	allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
	allowfullscreen></iframe>
	</div>
	</div>
	</div>
	</dialog>
	<script type="text/javascript">
	const dialog = document.getElementById('dialog');
	const showDialogButton = document.getElementById('show-dialog');
	const closeBtn = document.getElementById('close-btn');

	function handleKeyDown(event) {
	console.log(event.key, dialog.open);
	if (event.key === 'Escape') {
	event.preventDefault();
	if (dialog.open) {
	dialog.close();
	dialog.classList.remove('open');
	document.removeEventListener('keydown', handleKeyDown);
	}
	}
	}
	document.addEventListener('keydown', handleKeyDown);

	let pointer = {
	x: 0,
	y: 0,
	};

	showDialogButton.addEventListener('click', () => {
	dialog.showModal();
	dialog.classList.add('open');
	});

	closeBtn.addEventListener('click', () => {
	dialog.close();
	dialog.classList.remove('open');
	});
	</script>
	</body>
	</html>