diff --git a/src/lib/components/Video.svelte b/src/lib/components/Video.svelte
index 9b0bf50..0bff037 100644
--- a/src/lib/components/Video.svelte
+++ b/src/lib/components/Video.svelte
@@ -2,6 +2,7 @@
import clsx from 'clsx'
import PlayIcon from '~icons/mingcute/play-circle-line'
import { inview } from 'svelte-inview'
+ import { onMount } from 'svelte'
/** @type {string} */
export let src
@@ -14,7 +15,7 @@
/** @type {string}*/
export let videoClass = ''
let videoElement
- let isPaused = !autoplay
+ let isPaused = true
function togglePlay() {
videoElement.paused ? videoElement.play() : videoElement.pause()
@@ -47,6 +48,7 @@
on:click={togglePlay}
on:dblclick={makeFullscreen}
{autoplay}
+ on:play={() => (isPaused = false)}
/>
{
+ // Nessecary as browsers might block autoplay. The timeout is nessecary as the video is always paused at the very start, even with autoplay on
+ const timeout = setTimeout(() => {
+ isPaused = videoElement.paused
+ }, 10)
+
+ return () => clearTimeout(timeout)
+ })
@@ -33,7 +38,7 @@
use:inview={{ threshold: 0.5 }}
on:inview_enter={() => {
isVisible = true
- !isPaused && videoElement.play()
+ !isPaused && videoElement.play().catch(() => {})
}}
on:inview_leave={() => {
isVisible = false
@@ -48,8 +53,10 @@
disableremoteplayback="true"
class="rounded-xl"
loop
- muted={isMuted}
+ muted
preload="auto"
+ autoplay
+ on:play={() => {}}
poster={previewRiceThumbnail}
on:click={togglePlay}
on:dblclick={makeFullscreen}
@@ -60,20 +67,9 @@
isPaused ? 'opacity-100' : 'pointer-events-none'
)}
>
-
-
{#if isPaused}
@@ -103,12 +99,15 @@
border: solid 2px theme(colors.sky.400);
scale: 0.9;
background: theme(colors.cyan.300 / 70%);
+ aspect-ratio: 16/9;
& video {
transition-property: opacity;
transition-duration: inherit;
transition-timing-function: inherit;
opacity: 0.3;
+ height: 100%;
+ width: 100%;
}
.isVisible & {