feat: feature to autoplay videos on mobile

dfyz011 · Jun 12, 2024 · 0816a8c · 0816a8c
1 parent d0bae65
commit 0816a8c
Showing 1 changed file with 12 additions and 1 deletion.
diff --git a/src/components/Film.astro b/src/components/Film.astro
@@ -17,7 +17,15 @@ const { href, img, trailerGif, trailerVideo } = Astro.props;
 		<!-- Можно оптимизировать загрузку шрифта -->
 		<!-- настроить на сервере кэш -->
 		<Image class="static-image" loading="lazy" alt={href} src={img} />
-		<video class="animated-image" muted loop autoplay>
+		<!-- можно со звуком??? -->
+		<video
+			class="animated-image"
+			muted
+			loop
+			autoplay
+			webkit-playsinline
+			playsinline
+		>
 			<source
 				src={`/${import.meta.env.PUBLIC_TRAILER_VIDEOS_PATH}/${trailerVideo}`}
 				type="video/mp4"
@@ -69,5 +77,8 @@ const { href, img, trailerGif, trailerVideo } = Astro.props;
 		visibility: hidden;
 		object-fit: cover;
 		transition: opacity 0.3s ease;
+		@media (hover: none) {
+			visibility: visible;
+		}
 	}
 </style>