@studiostarum/custom-vimeo-player
v1.4.5
Published
A modern, responsive video player implementation built on top of the Vimeo Player SDK
Maintainers
studiostarumReadme
Custom Vimeo Video Player
A lightweight, customizable Vimeo video player with lightbox support. Perfect for Webflow and other website builders.
Features
- 🎥 Responsive Vimeo video player
- 💡 Optional lightbox mode
- 🎯 Background video mode
- 🎮 Customizable controls
- 🔄 Auto-play and loop options
- 🎨 Customizable styles
- 📱 Mobile-friendly
- ⌨️ Keyboard navigation in lightbox mode
- 🔍 High-quality video options
Installation
Option 1: CDN (Recommended for Webflow)
Add this script to your page's <head> section:
<!-- JavaScript -->
<script src="https://unpkg.com/@studiostarum/[email protected]/dist/custom-vimeo-player.min.js"></script>
<!-- CSS -->
<link rel="stylesheet" href="https://unpkg.com/@studiostarum/[email protected]/dist/custom-vimeo-player.css">Option 2: npm (For JavaScript Projects)
npm install @studiostarum/custom-vimeo-playerRecent Updates
v1.4.5
- Fixed issue with CSS not being loaded properly
- Added explicit CSS import option
- Improved documentation for styling
v1.4.4
- Fixed Lightbox component initialization error with improved error handling
- Added defensive coding to prevent errors when options are undefined
- Updated documentation
v1.4.3
- Fixed "Cannot read properties of undefined (reading 'autoplay')" error in VideoPlayer
- Improved error handling
- Fixed issue with circular dependencies
Usage
Using with CDN
Just add video containers anywhere in your HTML:
<!-- Basic Video Player -->
<div class="video-container"
data-video-id="75406915">
</div>
<!-- Video Player with Lightbox -->
<div class="video-container"
data-video-id="75406915"
data-lightbox="true"
data-autoplay="true"
data-muted="true">
</div>That's it! The player will automatically initialize.
Using with npm
// Import the components
import { VideoPlayer, Lightbox } from '@studiostarum/custom-vimeo-player';
// Import the CSS (important!)
import '@studiostarum/custom-vimeo-player/dist/custom-vimeo-player.css';
// Create a basic video player
const player = new VideoPlayer({
containerId: 'video-container',
videoIdOrUrl: '75406915',
autoplay: true,
muted: true
});
// Create a video player with lightbox
const playerWithLightbox = new VideoPlayer({
containerId: 'video-container-2',
videoIdOrUrl: '75406915',
autoplay: true,
muted: true,
background: true // Use background mode for preview
});
// Initialize lightbox separately
const lightbox = new Lightbox({
triggerSelector: '#video-container-2',
videoIdOrUrl: '75406915',
autoplay: true,
controls: true
});Alternative CSS Import Methods
If you're using a bundler like webpack, vite, or other build tools, you can also import the CSS in these ways:
// Method 1: Direct import
import '@studiostarum/custom-vimeo-player/dist/custom-vimeo-player.css';
// Method 2: Using the styles export
import '@studiostarum/custom-vimeo-player/styles';In Next.js, you might need to add the import to your _app.js or similar file:
// pages/_app.js or similar
import '@studiostarum/custom-vimeo-player/dist/custom-vimeo-player.css';Data Attributes
Basic Player Attributes
| Attribute | Type | Default | Description |
|-----------|------|---------|-------------|
| data-video-id | string | required | Vimeo video ID or URL |
| data-autoplay | boolean | true | Auto-play the video |
| data-muted | boolean | true | Mute the video |
| data-loop | boolean | true | Loop the video |
| data-controls | boolean | false | Show video controls |
| data-lightbox | boolean | false | Enable lightbox mode |
Lightbox-specific Attributes
| Attribute | Type | Default | Description |
|-----------|------|---------|-------------|
| data-lightbox-autoplay | boolean | true | Auto-play in lightbox |
| data-lightbox-muted | boolean | false | Mute in lightbox |
| data-lightbox-controls | boolean | true | Show controls in lightbox |
| data-lightbox-loop | boolean | false | Loop in lightbox |
| data-quality | string | '1080p' | Video quality (360p, 540p, 720p, 1080p, etc.) |
Examples
Background Video
<div class="video-container"
data-video-id="75406915"
data-autoplay="true"
data-muted="true"
data-loop="true"
data-controls="false">
</div>Lightbox with Custom Settings
<div class="video-container"
data-video-id="75406915"
data-lightbox="true"
data-autoplay="true"
data-muted="true"
data-lightbox-controls="true"
data-lightbox-autoplay="true"
data-quality="1080p">
</div>Interactive Video Player
<div class="video-container"
data-video-id="75406915"
data-controls="true"
data-autoplay="false"
data-muted="false"
data-loop="false">
</div>Styling
The player comes with default styles but can be customized using CSS:
/* Video container */
.video-container {
position: relative;
width: 100%;
aspect-ratio: 16/9;
}
/* Lightbox trigger button */
.lightbox-trigger-button {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: rgba(0, 0, 0, 0.7);
border: none;
border-radius: 50%;
width: 60px;
height: 60px;
cursor: pointer;
color: white;
transition: background 0.3s ease;
}
.lightbox-trigger-button:hover {
background: rgba(0, 0, 0, 0.9);
}Browser Support
- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)
License
MIT License