Video Player

pnpm dlx shadcn@latest add https://motion-kit-astro.vercel.app/r/video-player.json

npx shadcn@latest add https://motion-kit-astro.vercel.app/r/video-player.json

bunx --bun shadcn@latest add https://motion-kit-astro.vercel.app/r/video-player.json

yarn dlx shadcn@latest add https://motion-kit-astro.vercel.app/r/video-player.json

---
import "@/components/motion-kit/video-player-element.ts";
---

<motion-video-player
  src="https://example.com/video.mp4"
  poster="https://example.com/poster.jpg"
  class="aspect-video w-full max-w-2xl rounded-xl overflow-hidden"
></motion-video-player>

import "@/components/motion-kit/video-player-element.ts";

export default function Page() {
  return (
    <motion-video-player
      src="https://example.com/video.mp4"
      poster="https://example.com/poster.jpg"
      class="aspect-video w-full max-w-2xl rounded-xl overflow-hidden"
    />
  );
}

<script setup>
import "@/components/motion-kit/video-player-element.ts";
</script>

<template>
  <motion-video-player
    src="https://example.com/video.mp4"
    poster="https://example.com/poster.jpg"
    class="aspect-video w-full max-w-2xl rounded-xl overflow-hidden"
  />
</template>

<script>
  import "@/components/motion-kit/video-player-element.ts";
</script>

<motion-video-player
  src="https://example.com/video.mp4"
  poster="https://example.com/poster.jpg"
  class="aspect-video w-full max-w-2xl rounded-xl overflow-hidden"
/>

<script type="module" src="/components/motion-kit/video-player-element.js"></script>

<motion-video-player
  src="https://example.com/video.mp4"
  poster="https://example.com/poster.jpg"
  class="aspect-video w-full max-w-2xl rounded-xl overflow-hidden"
></motion-video-player>