<div x-data="{ playing: false, volume: 50 }">
    <div class="relative bg-black rounded-lg overflow-hidden">
        <video x-ref="video" class="w-full" src="your-video.mp4" @click="playing = !playing; playing ? $refs.video.play() : $refs.video.pause()"></video>
        <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/80 p-4">
            <div class="flex items-center gap-4">
                <button @click="playing = !playing; playing ? $refs.video.play() : $refs.video.pause()" class="text-white">
                    <span x-show="!playing">&#9654;</span>
                    <span x-show="playing">&#9646;&#9646;</span>
                </button>
                <input type="range" min="0" max="100" x-model="volume" @input="$refs.video.volume = volume / 100" class="w-24">
            </div>
        </div>
    </div>
</div>