1.4.5 • Published 3 months ago

@studiostarum/custom-vimeo-player v1.4.5

Weekly downloads
-
License
MIT
Repository
github
Last release
3 months ago

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/custom-vimeo-player@1.4.4/dist/custom-vimeo-player.min.js"></script>
<!-- CSS -->
<link rel="stylesheet" href="https://unpkg.com/@studiostarum/custom-vimeo-player@1.4.4/dist/custom-vimeo-player.css">

Option 2: npm (For JavaScript Projects)

npm install @studiostarum/custom-vimeo-player

Recent 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

AttributeTypeDefaultDescription
data-video-idstringrequiredVimeo video ID or URL
data-autoplaybooleantrueAuto-play the video
data-mutedbooleantrueMute the video
data-loopbooleantrueLoop the video
data-controlsbooleanfalseShow video controls
data-lightboxbooleanfalseEnable lightbox mode

Lightbox-specific Attributes

AttributeTypeDefaultDescription
data-lightbox-autoplaybooleantrueAuto-play in lightbox
data-lightbox-mutedbooleanfalseMute in lightbox
data-lightbox-controlsbooleantrueShow controls in lightbox
data-lightbox-loopbooleanfalseLoop in lightbox
data-qualitystring'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

1.4.5

3 months ago

1.4.4

3 months ago

1.4.3

3 months ago

1.4.2

3 months ago

1.4.1

3 months ago

1.4.0

3 months ago

1.3.3

3 months ago

1.3.2

3 months ago

1.3.1

3 months ago

1.3.0

3 months ago

1.2.3

3 months ago

1.2.2

3 months ago

1.2.1

3 months ago

1.2.0

3 months ago

1.1.0

3 months ago

1.0.1

3 months ago

1.0.0

3 months ago