youtube version

tailwind/custom/components/video-youtube.css

@@ -0,0 +1,48 @@
+* {
+	box-sizing: border-box;
+}
+.video-container {
+	background: #000;
+	position: relative;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	z-index: -99;
+}
+.video-foreground,
+.video-container iframe {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	pointer-events: none;
+}
+
+@media (min-aspect-ratio: 16/9) {
+	.video-foreground {
+		height: 300%;
+		top: -100%;
+	}
+}
+@media (max-aspect-ratio: 16/9) {
+	.video-foreground {
+		width: 300%;
+		left: -100%;
+	}
+}
+@media all and (max-width: 600px) {
+	.vid-info {
+		width: 50%;
+		padding: 0.5rem;
+	}
+	.vid-info h1 {
+		margin-bottom: 0.2rem;
+	}
+}
+@media all and (max-width: 500px) {
+	.vid-info .acronym {
+		display: none;
+	}
+}