onelineplayer

Minimal embeddable video player for Vimeo and direct video URLs — no branding.

Originally extracted from onelineplayer.com.

Install

npm install onelineplayer

import onelineplayer from 'onelineplayer'
import 'onelineplayer/style.css'

onelineplayer.mount('#player', {
  url: 'https://vimeo.com/226137389',
  playButton: true,
  progressBar: true,
  muteButton: true,
  fullscreenButton: true,
  overlay: true,
  time: true,
})

CDN

<div id="player"></div>
<script src="https://cdn.jsdelivr.net/npm/onelineplayer@1/dist/onelineplayer.min.js"></script>
<script>
  onelineplayer.mount('#player', {
    url: 'https://vimeo.com/226137389',
    playButton: true,
    progressBar: true,
    muteButton: true,
    fullscreenButton: true,
    overlay: true,
    time: true,
  })
</script>

Styles are injected automatically from the UMD build. With a bundler, also import onelineplayer/style.css.

iframe embed

No-code users can still use the hosted iframe from onelineplayer.com:

<iframe
  src="https://onelineplayer.com/player.html?url=..."
  allow="autoplay;fullscreen"
  allowfullscreen
></iframe>

Options

Option	Type	Default	Description
url	string	''	Vimeo URL or direct video file URL
poster	string	''	Preview image URL
autoplay	boolean	false	Start playing automatically
loop	boolean	false	Loop playback
autopause	boolean	false	Pause other onelineplayer instances on play
muted	boolean	false	Start muted
time	boolean	false	Show current time
progressBar	boolean	false	Show progress bar
playButton	boolean	true	Show play/pause button
overlay	boolean	true	Clickable dim overlay
muteButton	boolean	false	Show mute button
fullscreenButton	boolean	false	Show fullscreen button
style	'light' | 'dark'	'light'	Color scheme
buttonColor	string	—	Play button fill color
buttonSize	number	—	Play button size in px
overlayColor	string	—	Overlay background
overlayOpacity	number	—	Overlay opacity 0–1
quality	string	'auto'	Vimeo quality hint

API

const player = await onelineplayer.mount('#player', { url: '...' })
player.play()
player.pause()
player.destroy()

React / Vue

Mount in a lifecycle hook and destroy on unmount:

// React
useEffect(() => {
  let player
  onelineplayer.mount(ref.current, options).then((p) => { player = p })
  return () => player && player.destroy()
}, [])

Local demo

npm install
npm run dev

Open the demo page served by Vite (examples/demo.html).

License

MIT