Video Player

<py-video> provides a full-featured video player with auto-hiding controls, fullscreen, Picture-in-Picture, volume, and speed control.

Basic Usage

<py-video
  src="https://example.com/video.mp4"
  title="My Video"
></py-video>

With Poster Image

The poster image shows before playback starts. Click to play.

<py-video
  src="https://example.com/video.mp4"
  poster="https://example.com/thumbnail.jpg"
  title="My Video"
></py-video>

Aspect Ratio

Default is 16/9. Override with the aspect-ratio attribute:

<py-video src="video.mp4" aspect-ratio="4/3"></py-video>
<py-video src="short.mp4" aspect-ratio="9/16"></py-video>

Autoplay, Muted, Loop

<py-video
  src="background.mp4"
  autoplay
  muted
  loop
></py-video>

Note: Browsers block autoplay with audio. Use muted for autoplay to work reliably.

Theming

All themes work with <py-video>:

<py-video src="video.mp4" theme="dark"></py-video>
<py-video src="video.mp4" theme="midnight" accent="#ff6b6b"></py-video>

Controls

Controls auto-hide after 3 seconds during playback and reappear on hover or tap.

Control	Description
Play/Pause	Toggle playback
Progress bar	Seek by dragging or clicking
Volume	Slide to adjust, click speaker to mute
Speed	Choose from 0.5x, 0.75x, 1x, 1.25x, 1.5x, 2x
Picture-in-Picture	Float the video in a corner
Fullscreen	Enter fullscreen mode

JavaScript API

const player = document.querySelector('py-video')

player.play()
player.pause()
player.requestFullscreen()
player.requestPiP()

player.volume = 0.5
player.muted = true
player.playbackRate = 1.5

console.log(player.currentTime)
console.log(player.duration)
console.log(player.paused)

player.addEventListener('py-fullscreen', (e) => {
  console.log('fullscreen:', e.detail.active)
})

Events

Event	Detail	Description
py-play	—	Playback started
py-pause	—	Playback paused
py-ended	—	Video finished
py-time-update	{ currentTime, duration }	Fires during playback
py-fullscreen	{ active: boolean }	Fullscreen state changed
py-error	{ code, format }	Playback error

Browser Support

Feature	Chrome	Firefox	Safari
Fullscreen	71+	64+	16.4+
Picture-in-Picture	69+	113+	14+
Speed control	All	All	All