TubePlayer Logo
YouTube Player Library

TubePlayer

Hide the YouTube UI completely.
Deliver a fully branded popup video experience.

GitHub
Features

Features

See what TubePlayer can do — hands on.

POPUP
Popup Animations
Choose from 3 animation types when opening and closing the layer.
data-tube-animation="fade | slide | zoom"
PLAYBACK
Loop Playback
The video automatically restarts from the beginning when it ends.
data-tube-loop="true"
PLAYBACK
Start Time
Playback begins at a specific second (0:45 into the video).
data-tube-start="45"
PLAYBACK
Auto-close on End
The layer closes automatically when the video finishes. (starts at 3:20)
data-tube-close-on-end="true"
CONTROLS
Control Customization
Show only what you need, or enable the full control bar with speed control.
data-tube-controls="play,progress,time,mute,volume,fullscreen,speed"
CUSTOM
Custom Poster
Use your own image as the poster instead of the YouTube thumbnail. Visible when paused.
data-tube-poster="/path/to/image.jpg"
INLINE
Inline Player
Embed the player directly on the page — no popup, no overlay needed.
data-tube-inline="VIDEO_ID"
Get Started ↓
Inline

Inline Player

Embed videos directly on the page — no popup required.

FULL Full Controls
data-tube-controls="play,progress,time,mute,volume,fullscreen,speed"
MINIMAL Minimal Controls
data-tube-controls="mute,fullscreen"
LOOP Loop
data-tube-loop="true"
NO CONTROLS No Controls
data-tube-no-interaction="true"
Documentation

Get Started

Set up a YouTube player — popup or inline — in just a few lines of code.

1

Install

Add TubePlayer to your project via npm or CDN.

npm install tubeplayer
<!-- CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tubeplayer/dist/style.css" />

<!-- JS (UMD) -->
<script src="https://cdn.jsdelivr.net/npm/tubeplayer/dist/tubeplayer.umd.js"></script>
2

HTML Markup

Declare the player using data attributes. Choose Popup for a layer overlay, or Inline to embed directly on the page.

[data-tube-layer] — Popup

data-tube-layer string —
data-tube-animation "fade" "fade"
data-tube-close-on-dim boolean true

[data-tube-youtube] / [data-tube-inline]

data-tube-youtube string —
data-tube-inline string —
data-tube-autoplay boolean true / false
data-tube-muted boolean false
data-tube-theme "dark" "dark"
data-tube-controls string —
data-tube-start number 0
data-tube-loop boolean false
data-tube-poster string —
data-tube-close-on-end boolean false
data-tube-no-interaction boolean false
3

Initialize

Import the script and call TubePlayer.init().

import TubePlayer from 'tubeplayer';
import 'tubeplayer/style.css';

TubePlayer.init();
4

Events (optional)

Get a layer instance with TubePlayer.get(id) and subscribe to events.

layer:open
layer:close
video:play
video:pause
video:end
video:ready

Space
Esc
M
F