mary.my.id
+14
-8
src/components/embeds/video-embed.tsx
+14
-8
src/components/embeds/video-embed.tsx
···
48
48
>
49
49
<div class={cn} style={{ 'aspect-ratio': ratio }}>
50
50
{!interactive ? (
51
-
<img
52
-
alt={/* @once */ embed.alt}
53
-
src={/* @once */ embed.thumbnail && replaceVideoCdnUrl(embed.thumbnail)}
54
-
class={
55
-
`h-full w-full object-contain` +
56
-
(props.blur ? ` scale-125 ${borderless ? `blur-xl` : `blur`}` : ``)
57
-
}
58
-
/>
51
+
<>
52
+
<img
53
+
alt={/* @once */ embed.alt}
54
+
src={/* @once */ embed.thumbnail && replaceVideoCdnUrl(embed.thumbnail)}
55
+
class={
56
+
`h-full w-full object-contain` +
57
+
(props.blur ? ` scale-125 ${borderless ? `blur-xl` : `blur`}` : ``)
58
+
}
59
+
/>
60
+
61
+
<div class="absolute left-1/2 top-1/2 grid aspect-square h-2/5 max-h-12 -translate-x-1/2 -translate-y-1/2 place-items-center rounded-full bg-p-neutral-700/60 text-white backdrop-blur">
62
+
<PlaySolidIcon class="h-2/5 w-2/5" />
63
+
</div>
64
+
</>
59
65
) : (
60
66
<Show
61
67
when={loaded()}