Showcase

Video Player

Custom video player with play/pause, a hover-expanding scrubber, mute, and Flip fullscreen expand animation.

Preview

Hover to reveal controls. Click the expand icon to fullscreen via GSAP Flip layout animation.

Installation

pnpm dlx motion-blocks add video-player

npx motion-blocks add video-player

bunx --bun motion-blocks add video-player

yarn dlx motion-blocks add video-player

Usage

---import "@/components/motion-blocks/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-blocks/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-blocks/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-blocks/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-blocks/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>

API Reference

Attribute	Type	Default
`src`	`string`	`""`
`poster`	`string`	`""`
`autoplay`	`boolean`	`false`
`muted`	`boolean`	`true`
`loop`	`boolean`	`false`
`hide-controls`	`boolean`	`false`