Video Lightbox Button Plugin FAQs

Installation & Setup

Basic Plugin Implementation

Add this code to your site's header via Settings > Advanced > Code Injection:

<!-- Video Lightbox Button Plugin -->
<link href="/s/plugin-video-lightbox.css" rel="stylesheet">
<script src="/s/plugin-video-lightbox.js"></script>
<script>
pluginVideoLightbox({
    'selector': '.video-lightbox-trigger',
    'autoplay': true
});
</script>
<!-- end Video Lightbox Button Plugin -->

How do I create a video lightbox button?

Step-by-step creation:

1. Get video URL or embed code

2. Create button/thumbnail image

3. Add plugin code:

<!-- Method 1: Direct URL -->
<a href="#lightbox-video" class="video-lightbox-trigger" data-video="https://player.vimeo.com/video/123456789">
    <img src="/s/video-poster.jpg" alt="Watch Video">
    <div class="play-overlay">
        <span class="play-icon">▶</span>
    </div>
</a>

<!-- Method 2: YouTube -->
<a href="#lightbox-video" class="video-lightbox-trigger" data-video="https://www.youtube.com/embed/VIDEO_ID">
    <img src="/s/youtube-thumbnail.jpg" alt="Watch Video">
</a>

Styling the button:

.video-lightbox-trigger {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

.play-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0,0,0,0.7);
    border-radius: 50%;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.play-overlay:hover {
    background: rgba(0,0,0,0.9);
    transform: translate(-50%, -50%) scale(1.1);
}

.play-icon {
    color: white;
    font-size: 24px;
    margin-left: 3px; /* Offset for visual centering */
}

Video Hosting & Service Integration

Can I use this plugin with videos uploaded directly to Squarespace?

Squarespace video compatibility:

• Limited support for native Squarespace videos

• Better compatibility with externally hosted videos

• Recommended approach: Use Vimeo or YouTube for lightbox videos

Setup for external videos:

<!-- Video Lightbox Button -->
<a href="#video-lightbox" data-video-url="https://vimeo.com/123456789">
    <img src="/s/video-thumbnail.jpg" alt="Play Video">
    <div class="play-button-overlay">▶</div>
</a>

What video hosting services work best with this plugin?

Service compatibility ranking:

🥇 Vimeo (Recommended)

• Excellent embed support

• No ads in videos

• Good customization options

• Reliable API

<a href="#video" data-video="https://player.vimeo.com/video/123456789?autoplay=1">

🥈 YouTube

• Wide compatibility

• Good performance

• Contains ads (can't be removed)

• Extensive API

<a href="#video" data-video="https://www.youtube.com/embed/VIDEO_ID?autoplay=1&rel=0">

🥉 Self-hosted

• Full control over video

• No external dependencies

• Larger file sizes

• Browser compatibility varies

<a href="#video" data-video="/s/your-video.mp4">

❌ Avoid:

• Facebook videos (embed restrictions)

• Instagram videos (limited embed support)

• TikTok (not designed for embedding)

Why isn't my video playing in the lightbox?

Common video loading issues:

URL format problems:

• ❌ https://vimeo.com/123456789 (regular URL)

• ✅ https://player.vimeo.com/video/123456789 (embed URL)

• ❌ https://www.youtube.com/watch?v=VIDEO_ID (watch URL)

• ✅ https://www.youtube.com/embed/VIDEO_ID (embed URL)

HTTPS requirements:

• Video URLs must use HTTPS on secure sites

• Mixed content warnings can block video loading

Video privacy settings:

• Ensure videos are publicly accessible

• Check domain restrictions on video host

Customization & Appearance

Can I customize the video player appearance in the lightbox?

Vimeo customization:

<!-- Vimeo with custom options -->
<a href="#video" data-video="https://player.vimeo.com/video/123456789?color=ff0000&title=0&byline=0&portrait=0&autoplay=1">

Parameters:

• color=ff0000 - Player accent color

• title=0 - Hide video title

• byline=0 - Hide author info

• portrait=0 - Hide author avatar

• autoplay=1 - Start automatically

YouTube customization:

<!-- YouTube with custom options -->
<a href="#video" data-video="https://www.youtube.com/embed/VIDEO_ID?autoplay=1&rel=0&modestbranding=1&controls=1">

Parameters:

• rel=0 - Don't show related videos

• modestbranding=1 - Minimal YouTube branding

• controls=1 - Show player controls

• fs=0 - Disable fullscreen

Lightbox container styling:

.video-lightbox-container {
    max-width: 90vw !important;
    max-height: 90vh !important;
    background: #000 !important;
    border-radius: 8px !important;
}

.video-lightbox-container iframe {
    width: 100% !important;
    height: 100% !important;
    border: none !important;
}

Multiple Videos & Advanced Usage

Can I have multiple video lightbox buttons on the same page?

Yes, each button can have different videos:

<!-- Video 1 -->
<a href="#video-1" class="video-lightbox-trigger" data-video="https://player.vimeo.com/video/111111111">
    <img src="/s/video1-thumb.jpg" alt="Video 1">
</a>

<!-- Video 2 -->
<a href="#video-2" class="video-lightbox-trigger" data-video="https://player.vimeo.com/video/222222222">
    <img src="/s/video2-thumb.jpg" alt="Video 2">
</a>

<!-- Video 3 -->
<a href="#video-3" class="video-lightbox-trigger" data-video="https://www.youtube.com/embed/DIFFERENT_ID">
    <img src="/s/video3-thumb.jpg" alt="Video 3">
</a>

Plugin initialization for multiple videos:

pluginVideoLightbox({
    'selector': '.video-lightbox-trigger',
    'autoplay': true,
    'closeOnClickOutside': true
});

Troubleshooting & Performance

Videos are slow to load or buffer in the lightbox. How do I optimize?

Performance optimization strategies:

Use video platform optimization:

<!-- Vimeo with quality settings -->
<a href="#video" data-video="https://player.vimeo.com/video/123456789?quality=720p">

<!-- YouTube with quality settings -->
<a href="#video" data-video="https://www.youtube.com/embed/VIDEO_ID?vq=hd720">

Preload critical videos:

<link rel="preload" href="https://player.vimeo.com/video/123456789" as="document">

Optimize thumbnail images:

.video-lightbox-trigger img {
    width: 100%;
    height: auto;
    object-fit: cover;
    /* Use WebP format when possible */
}

Lazy load non-critical videos:

pluginVideoLightbox({
    'lazyLoad': true,
    'preloadFirst': 2 // Only preload first 2 videos
});

Video lightbox doesn't work on mobile devices. What should I check?

Mobile-specific troubleshooting:

Touch events:

// Ensure touch compatibility
$('.video-lightbox-trigger').on('click touchend', function(e) {
    e.preventDefault();
    // Trigger lightbox
});

Mobile video restrictions:

• iOS requires user interaction for autoplay

• Some Android browsers block video embeds

• Data-saving modes may block videos

Mobile-optimized sizing:

@media screen and (max-width: 767px) {
    .video-lightbox-container {
        max-width: 95vw !important;
        max-height: 70vh !important;
        margin: 15vh auto !important;
    }
    
    .video-lightbox-trigger {
        min-height: 44px; /* Touch-friendly size */
    }
}

Configuration Examples

Basic Configuration

pluginVideoLightbox({
    'selector': '.video-lightbox-trigger',
    'autoplay': true
});

Advanced Configuration

pluginVideoLightbox({
    'selector': '.video-lightbox-trigger',
    'autoplay': true,
    'closeOnClickOutside': true,
    'lazyLoad': true,
    'preloadFirst': 2
});

For additional support, ensure your video URLs use the correct embed format and test on multiple devices. Check browser console for any JavaScript errors during video loading.