Background Video Controls Plugin FAQs

Basic Setup & Targeting

Q: Why aren't the video controls appearing on my background video? A: Setup verification checklist:

1. Background video exists - Verify video is set in page/section settings

2. Plugin files uploaded - Both CSS and JS to file manager

3. Code injection added - Header section with correct targeting

4. Video format supported - MP4 recommended for best compatibility

5. Test on published site - Controls may not show in edit mode

Basic setup:

html

<!-- Background Video Controls Plugin -->
<link href="/s/plugin-video-controls.css" rel="stylesheet">
<script src="/s/plugin-video-controls.js"></script>
<script>
pluginVideoControls({
    'selector': '.sqs-video-background',
    'showControls': true
});
</script>
<!-- end Background Video Controls Plugin -->

Q: How do I apply video controls to only specific videos on my site? A: Target specific sections or pages:

Method 1: Target by page ID

javascript

pluginVideoControls({
    'pageIDs': ['#collection-12345', '#page-67890'],
    'selector': '.sqs-video-background'
});

Method 2: Target by section ID

javascript

pluginVideoControls({
    'selector': '#block-yui_3_17_2_1_1234567890_12345 .sqs-video-background'
});

Method 3: Use CSS classes

css

/* Add this class to sections where you want controls */
.video-controls-enabled .sqs-video-background {
    /* Video will get controls */
}

Video Hosting & Compatibility

Q: Can I use this plugin with YouTube or Vimeo background videos? A: Limited external video support:

• Self-hosted MP4 - ✅ Full support

• YouTube embeds - ⚠️ Limited (autoplay restrictions)

• Vimeo embeds - ⚠️ Limited (API restrictions)

For external videos:

javascript

pluginVideoControls({
    'videoType': 'external',
    'selector': '.sqs-video-background iframe',
    'useAPI': true // Requires video service API
});

Best practice: Use self-hosted MP4 files for reliable control functionality.

Q: What video formats work best with this plugin? A: Recommended formats:

• Primary: MP4 (H.264 codec)

• Backup: WebM (VP9 codec)

• Avoid: MOV, AVI, FLV

Video optimization:

• Resolution: 1920x1080 max for web

• Bitrate: 2-5 Mbps for good quality/size balance

• Duration: Keep under 30 seconds for background videos

• File size: Under 10MB when possible

Control Customization

Q: How do I change the position of the video controls? A: Position controls with CSS:

css

.video-controls {
    position: absolute !important;
    bottom: 20px !important;
    right: 20px !important;
    z-index: 100 !important;
}

/* Center controls */
.video-controls.centered {
    left: 50% !important;
    transform: translateX(-50%) !important;
}

/* Top-left positioning */
.video-controls.top-left {
    top: 20px !important;
    left: 20px !important;
    bottom: auto !important;
    right: auto !important;
}

Q: Can I customize the appearance of the play/pause buttons? A: Complete button styling:

css

.video-play-button, .video-pause-button {
    background-color: rgba(255,255,255,0.9) !important;
    border: none !important;
    border-radius: 50% !important;
    width: 60px !important;
    height: 60px !important;
    color: #333 !important;
    font-size: 20px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.3) !important;
}

.video-play-button:hover, .video-pause-button:hover {
    background-color: rgba(255,255,255,1) !important;
    transform: scale(1.1) !important;
}

/* Custom icons */
.video-play-button::before {
    content: "▶" !important;
}
.video-pause-button::before {
    content: "⏸" !important;
}

Q: How do I add a mute/unmute button? A: Enable audio controls:

javascript

pluginVideoControls({
    'showMute': true,
    'showVolume': true,
    'volumeSlider': true
});

Custom mute button styling:

css

.video-mute-button {
    background-color: rgba(0,0,0,0.7) !important;
    color: white !important;
    border-radius: 5px !important;
    padding: 8px 12px !important;
    margin-left: 10px !important;
}

.video-mute-button.muted {
    background-color: rgba(255,0,0,0.7) !important;
}

Mobile Compatibility & Restrictions

Q: Video controls don't work on mobile devices. How do I fix this? A: Mobile limitations and solutions:

Common mobile issues:

• Autoplay restrictions - Most mobile browsers block autoplay

• Touch vs click events - Different interaction methods

• Performance constraints - Video processing limitations

Mobile-optimized setup:

javascript

// Detect mobile and adjust settings
var isMobile = /Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);

pluginVideoControls({
    'mobileAutoplay': false,
    'showPoster': true,
    'posterImage': '/s/video-poster.jpg',
    'touchControls': isMobile,
    'showPlayOnMobile': true
});

Mobile-specific CSS:

css

@media screen and (max-width: 767px) {
    .video-controls {
        bottom: 15px !important;
        right: 15px !important;
    }
    
    .video-controls button {
        font-size: 18px !important;
        padding: 15px !important;
        min-width: 50px !important;
        min-height: 50px !important;
        /* Larger touch targets */
    }
    
    /* Show poster image on mobile */
    .sqs-video-background {
        background-image: url('/s/video-poster.jpg') !important;
        background-size: cover !important;
    }
}

Q: Why doesn't my background video autoplay on mobile? A: Mobile autoplay restrictions:

• iOS Safari - Blocks autoplay with audio

• Chrome Mobile - Requires user interaction

• Android browsers - Vary by manufacturer

Solutions:

1. Use muted videos for better autoplay compatibility

2. Add poster images as fallbacks

3. Show play button on mobile to trigger video

4. Consider image alternatives for mobile

javascript

pluginVideoControls({
    'muteOnMobile': true,
    'posterFallback': '/s/mobile-hero-image.jpg',
    'detectMobile': true
});

Advanced Features & Overlay Content

Q: Can I overlay additional text or content on top of the background video? A: Yes, use CSS positioning:

css

.video-overlay-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    text-align: center;
    color: white;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

.video-overlay-content h1 {
    font-size: 3em;
    margin-bottom: 20px;
}

.video-overlay-content .btn {
    background: rgba(255,255,255,0.9);
    color: #333;
    padding: 15px 30px;
    border-radius: 5px;
    text-decoration: none;
}

HTML structure:

html

<div class="video-section">
    <!-- Video background here -->
    <div class="video-overlay-content">
        <h1>Your Headline</h1>
        <p>Your subtitle text</p>
        <a href="#" class="btn">Call to Action</a>
    </div>
</div>

Q: How do I ensure video controls don't interfere with overlay content? A: Layer management:

css

/* Video controls */
.video-controls {
    z-index: 100; /* Highest layer */
}

/* Overlay content */
.video-overlay-content {
    z-index: 50; /* Middle layer */
}

/* Video background */
.sqs-video-background {
    z-index: 1; /* Lowest layer */
}

/* Ensure controls don't block important content */
.video-controls {
    pointer-events: auto;
}

.video-overlay-content {
    pointer-events: none; /* Allow clicks through to video */
}

.video-overlay-content .btn {
    pointer-events: auto; /* Except for buttons */
}