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;
+	}
+}

theme/template-parts/layout/header-home.php

@@ -1,6 +1,10 @@
 <header id="masthead" style="background-image: url(<?= get_header_image() ?>)" class="home">
 	<div class="video-container">
-		<video autoplay muted loop src="<?= get_field('video_header', 'option') ?>"></video>
+		<div class="video-foreground">
+			<iframe
+				src="https://www.youtube.com/embed/<?= get_field('video_header', 'option') ?>?controls=0&showinfo=0&rel=0&autoplay=1&loop=1&mute=1"
+				frameborder="0" allowfullscreen></iframe>
+		</div>
 	</div>
 
 	<div class="header-cointainer">
@@ -41,7 +45,8 @@
 				</nav>
 			</div>
 			<a href="<?= get_field('linkedin_link', 'option') ?>" target="_blank">
-				<img src="<?= get_field('abrevitura_de_linkedin', 'option') ?>" alt="Linkedin" class="linkedin hidden lg:block  ">
+				<img src="<?= get_field('abrevitura_de_linkedin', 'option') ?>" alt="Linkedin"
+					 class="linkedin hidden lg:block  ">
 			</a>
 		</nav>