26 lines
3.0 KiB
HTML
26 lines
3.0 KiB
HTML
<div x-data="{videoModalIsOpen: false}">
|
|
<button x-on:click="videoModalIsOpen = true, $refs.video.play()" type="button" class="inline-flex items-center gap-2 whitespace-nowrap rounded-radius bg-primary border border-primary px-4 py-2 text-center text-sm font-medium tracking-wide text-on-primary transition hover:opacity-75 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary active:opacity-100 active:outline-offset-0 dark:bg-primary-dark dark:border-primary-dark dark:text-on-primary-dark dark:focus-visible:outline-primary-dark">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" fill="currentColor" class="w-4 h-4">
|
|
<path fill-rule="evenodd" d="M4.5 5.653c0-1.426 1.529-2.33 2.779-1.643l11.54 6.348c1.295.712 1.295 2.573 0 3.285L7.28 19.991c-1.25.687-2.779-.217-2.779-1.643V5.653z" clip-rule="evenodd"/>
|
|
</svg>
|
|
Play Video
|
|
</button>
|
|
<div x-cloak x-show="videoModalIsOpen" x-transition.opacity.duration.200ms x-trap.inert.noscroll="videoModalIsOpen" x-on:keydown.esc.window="videoModalIsOpen = false, $refs.video.pause()" x-on:click.self="videoModalIsOpen = false, $refs.video.pause()" class="fixed inset-0 z-30 flex items-center justify-center bg-black/20 p-4 backdrop-blur-md lg:p-8" role="dialog" aria-modal="true" aria-labelledby="videoModalTitle">
|
|
<!-- Modal Dialog -->
|
|
<div x-show="videoModalIsOpen" x-transition:enter="transition ease-out duration-300 delay-200" x-transition:enter-start="opacity-0 translate-y-8" x-transition:enter-end="opacity-100 translate-y-0" class="max-w-2xl w-full relative">
|
|
<!-- Close Button -->
|
|
<button type="button" x-show="videoModalIsOpen" x-on:click="videoModalIsOpen = false, $refs.video.pause()" x-transition:enter="transition ease-out duration-200 delay-500" x-transition:enter-start="opacity-0 scale-0" x-transition:enter-end="opacity-100 scale-100" class="absolute -top-12 right-0 flex items-center justify-center rounded-full bg-surface-alt p-1.5 text-on-surface-strong hover:opacity-75 active:opacity-100 dark:bg-surface-dark-alt dark:text-on-surface-dark-strong" aria-label="close modal">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" stroke="currentColor" fill="none" stroke-width="1.4" class="w-4 h-4">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/>
|
|
</svg>
|
|
</button>
|
|
<!-- Video -->
|
|
<video x-ref="video" class="w-full max-w-2xl rounded-radius aspect-video" controls>
|
|
<track default kind="captions" srclang="en" src="path to your .vtt file" />
|
|
<source src="https://penguinui.s3.amazonaws.com/component-assets/peng.webm" type="video/webm">
|
|
<source src="https://penguinui.s3.amazonaws.com/component-assets/peng.mp4" type="video/mp4">
|
|
Your browser does not support HTML video.
|
|
</video>
|
|
</div>
|
|
</div>
|
|
</div> |