<script lang="ts">
	import ScublingCard from "$lib/ScublingCard.svelte";
	const videos = import.meta.glob("./*.mp4", {
		eager: true,
		import: "default",
		query: { enhanced: true },
	});
	const scub = videos["./scub.mp4"];
</script>

<svelte:head>
	<title>Doloro Website [Scublings]</title>
	<meta property="og:type" content="video.other" />
	<meta property="og:video" content="https://doloro.co.uk{scub.video.src}" />
	<meta property="og:video:type" content="video/mp4" />
	<meta property="og:video:width" content="1920" />
	<meta property="og:video:height" content="1080" />
	<meta property="og:title" content="Scublings" />
	<!-- Optional but helps Discord show a thumbnail -->
	<!-- <meta -->
	<!-- 	property="og:image" -->
	<!-- 	content="https://yourdomain.com/scub-thumbnail.jpg" -->
	<!-- /> -->
</svelte:head>

<ScublingCard title="Scublings" description="A scubling video." />

<div class="video-container">
	<enhanced:video src={scub}> </enhanced:video>
</div>

<style lang="scss">
	.video-container {
		display: flex;
		height: auto;
		aspect-ratio: 16/9;
		flex-direction: column;
		align-items: center;
		border-width: 3px;
		border-color: var(--primary);
		border-style: ridge;
		video {
			width: 100%;
			height: 100%;
		}
	}
</style>
