WP Manifestindependent plugin directory
manifest / media / fullscreen-video-widget

FullScreen Video Background Widget

display full wide video background anywhere in wordpress via widget

by Sachin Solanki · github.com/tachukadi/fullscreen-video-widget

★ 0stars
0forks

Install

No release zip yet. The repository archive installs, but the folder name will carry the branch suffix and updates will not flow:

wp plugin install https://github.com/tachukadi/fullscreen-video-widget/archive/refs/heads/main.zip
Readme github.com/tachukadi/fullscreen-video-widget ↗

A powerful WordPress widget plugin that creates stunning full-width video backgrounds with autoplay functionality. Perfect for hero sections, landing pages, and creating immersive visual experiences on your WordPress website.

📌 Table of Contents

✨ Features

Core Features

  • 🎬 Full-Width Video Display - Videos automatically span the entire viewport width
  • ▶️ Autoplay with Loop - Videos play automatically and loop seamlessly
  • 📱 Fully Responsive - Separate height settings for desktop and mobile devices
  • 🎨 Media Library Integration - Easy video selection from WordPress Media Library
  • 📝 Overlay Content - Add HTML/text content over your video background
  • 🎛️ Customizable Controls - Adjust height, opacity, mute settings, and more
  • 🔇 Smart Mute Control - Ensures autoplay works across all browsers
  • 📹 Multiple Format Support - Supports MP4, WebM, and OGG video formats
  • 🖼️ Fallback Support - Graceful degradation for unsupported browsers

Advanced Features

  • Performance Optimized - Lightweight code with minimal impact on page load
  • SEO Friendly - Proper HTML structure and accessibility considerations
  • Page Builder Compatible - Works with Elementor, Beaver Builder, Divi, etc.
  • Translation Ready - Fully prepared for localization
  • Developer Friendly - Clean, documented code with hooks and filters

📋 Requirements

  • WordPress 5.0 or higher
  • PHP 7.0 or higher
  • Modern browser with HTML5 video support
  • Video files in MP4, WebM, or OGG format

📦 Installation

Method 1: Upload via WordPress Admin (Recommended)

  1. Download the plugin file (fullscreen-video-widget-all-in-one-fixed.php)
  2. Log in to your WordPress admin panel
  3. Navigate to Plugins → Add New → Upload Plugin
  4. Click Choose File and select the downloaded file
  5. Click Install Now
  6. Once installed, click Activate

Method 2: FTP Upload

  1. Download the plugin file
  2. Connect to your server via FTP
  3. Navigate to /wp-content/plugins/
  4. Upload fullscreen-video-widget-all-in-one-fixed.php
  5. Go to WordPress admin → Plugins
  6. Find "FullScreen Video Background Widget" and click Activate

Method 3: Direct File Upload

  1. Access your WordPress installation directory
  2. Navigate to /wp-content/plugins/
  3. Upload the plugin file
  4. Activate via WordPress admin panel

🚀 Usage

Basic Setup

  1. Navigate to Widgets

    • Go to Appearance → Widgets in your WordPress admin

  2. Add the Widget

    • Find "FullScreen Video Background" in available widgets
    • Drag it to your desired widget area
    • For best results, use a full-width widget area

  3. Configure Settings

    • Click on the widget to expand settings
    • Upload or select a video from Media Library
    • Adjust height settings for desktop and mobile
    • Configure additional options as needed

  4. Save and Preview

    • Click Save to apply changes
    • Visit your site to see the video background in action

Creating a Full-Width Widget Area

If your theme doesn't have a full-width widget area, add this to your theme's functions.php:

// Register full-width widget area for video backgrounds
function register_fullwidth_video_widget_area() {
    register_sidebar(array(
        'name'          => __('Full Width Video Area', 'text_domain'),
        'id'            => 'fullwidth-video-area',
        'description'   => __('Full width widget area for video backgrounds', 'text_domain'),
        'before_widget' => '<div id="%1$s" class="widget fullwidth-widget %2$s">',
        'after_widget'  => '</div>',
        'before_title'  => '',
        'after_title'   => '',
    ));
}
add_action('widgets_init', 'register_fullwidth_video_widget_area');

Then add this to your theme template (e.g., header.php, front-page.php):

<?php if (is_active_sidebar('fullwidth-video-area')) : ?>
    <div class="fullwidth-video-section">
        <?php dynamic_sidebar('fullwidth-video-area'); ?>
    </div>
<?php endif; ?>

⚙️ Widget Settings

Video Settings

Setting Description Default Notes
Video URL Direct URL to your video file None Required field
Select from Media Button to choose from Media Library - Opens media picker

Display Settings

Setting Description Default Range
Desktop Height Video height on desktop devices 500px 100-1000px
Mobile Height Video height on mobile devices 300px 100-600px
Mute Video Mute video audio Checked Required for autoplay

Overlay Settings

Setting Description Default Range
Overlay Opacity Darkness of overlay 0.3 0-1 (0=transparent, 1=opaque)
Overlay Content HTML content over video Empty Supports HTML

Example Overlay Content

<h1>Welcome to Our Site</h1>
<p>Discover amazing products and services</p>
<button class="cta-button">Get Started</button>

🎨 Styling & Customization

Custom CSS Classes

The widget uses these CSS classes you can target:

.fullscreen-video-background-widget { /* Main container */ }
.video-container { /* Video wrapper */ }
.background-video { /* Video element */ }
.video-overlay { /* Overlay container */ }
.overlay-content { /* Content wrapper */ }

Example Custom Styles

Add to Appearance → Customize → Additional CSS:

/* Custom overlay text styling */
.fullscreen-video-background-widget .overlay-content h1 {
    font-size: 48px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 20px;
    animation: fadeInUp 1s ease;
}

/* Custom button styling */
.fullscreen-video-background-widget .cta-button {
    background: #ff6b6b;
    color: white;
    padding: 15px 40px;
    border: none;
    border-radius: 50px;
    font-size: 18px;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.fullscreen-video-background-widget .cta-button:hover {
    transform: scale(1.05);
}

/* Add animation */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

📱 Mobile Optimization

Responsive Behavior

The widget automatically adjusts for different screen sizes:

  • Desktop (>768px): Uses desktop height setting
  • Mobile (≤768px): Uses mobile height setting
  • Video scaling: Maintains aspect ratio with object-fit: cover

Mobile-Specific CSS

/* Optimize for mobile */
@media (max-width: 768px) {
    .fullscreen-video-background-widget .overlay-content h1 {
        font-size: 28px;
    }

    .fullscreen-video-background-widget .overlay-content p {
        font-size: 16px;
    }
}

Performance Tips for Mobile

  1. Use smaller video files for mobile (consider using a CDN that serves different sizes)
  2. Keep mobile height reasonable (250-400px recommended)
  3. Always enable video muting for mobile autoplay
  4. Consider using a poster image for slower connections

🔧 Troubleshooting

Common Issues and Solutions

Video Not Playing/Autoplaying

Problem: Video doesn't start automatically Solutions:

  • ✅ Ensure "Mute Video" is checked (required for autoplay in most browsers)
  • ✅ Check video file format (use MP4 for best compatibility)
  • ✅ Verify video URL is correct and accessible
  • ✅ Test in different browsers

Video Not Full Width

Problem: Video has margins or doesn't span full width Solution: Add this CSS:

.widget_fullscreen_video_background {
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

Video Cut Off on Mobile

Problem: Video appears partially off-screen on mobile Solution: Already fixed in the latest version. If using older version, add:

@media (max-width: 768px) {
    .fullscreen-video-background-widget .background-video {
        transform: none !important;
        top: 0 !important;
        left: 0 !important;
    }
}

Overlay Content Not Visible

Problem: Text over video is hard to see Solutions:

  • ✅ Increase overlay opacity (0.4-0.6 recommended)
  • ✅ Use contrasting text colors (white text usually works best)
  • ✅ Add text shadow for better readability:
    .overlay-content * {
  text-shadow: 2px 2px 4px rgba(0,0,0,0.7);
}

💡 Best Practices

Video Optimization

  1. File Size: Keep videos between 2-5MB for optimal loading
  2. Resolution: Use 1920x1080 (1080p) for desktop
  3. Frame Rate: 24-30 fps is sufficient
  4. Compression: Use tools like HandBrake for compression
  5. Duration: Keep videos 10-30 seconds for smaller file sizes

Recommended Video Specifications

Property Recommended Maximum
Resolution 1920x1080 1920x1080
Bitrate 2-3 Mbps 5 Mbps
Frame Rate 24-30 fps 30 fps
File Size 2-5 MB 10 MB
Duration 10-30 sec 60 sec

Content Guidelines

  • Keep overlay text concise and readable
  • Use high contrast between text and video
  • Ensure important content isn't covered by video movement
  • Test on various devices and screen sizes
  • Consider accessibility (provide alternatives for important information)

🌐 Browser Support

Browser Version Support
Chrome 53+ ✅ Full Support
Firefox 49+ ✅ Full Support
Safari 10+ ✅ Full Support
Edge 79+ ✅ Full Support
Opera 40+ ✅ Full Support
iOS Safari 10+ ✅ Full Support*
Chrome Android 53+ ✅ Full Support

*iOS requires muted videos for autoplay

❓ Frequently Asked Questions

Can I use YouTube or Vimeo videos?

No, this widget is designed for self-hosted video files. For YouTube/Vimeo, you'll need a different solution or embed code.

Why isn't my video autoplaying?

Most browsers require videos to be muted for autoplay. Make sure the "Mute Video" option is checked.

Can I use multiple video widgets on one page?

Yes, but be mindful of performance. Multiple large videos can slow down page loading.

How do I optimize videos for web?

Use tools like:

  • HandBrake (free, cross-platform)
  • Adobe Media Encoder
  • FFmpeg (command line)
  • Online tools like CloudConvert

Can I add a play/pause button?

The widget doesn't include controls by default, but you can add custom JavaScript:

jQuery('.background-video').on('click', function() {
    this.paused ? this.play() : this.pause();
});

Does it work with page builders?

Yes! Compatible with:

  • Elementor
  • Beaver Builder
  • Divi Builder
  • WPBakery
  • Gutenberg Blocks

📝 Changelog

Version 1.0.1 (Current)

  • 🐛 Fixed mobile video display issue
  • 🎨 Improved mobile responsive behavior
  • 📱 Added iOS-specific compatibility fixes
  • 🔧 Enhanced transform handling for mobile devices

Version 1.0.0

  • 🎉 Initial release
  • ✨ Full-width video background functionality
  • 🎬 Media Library integration
  • 📱 Responsive height settings
  • 📝 Overlay content support
  • ▶️ Autoplay with loop
  • 🔇 Mute control option

🤝 Support

Getting Help

  1. Documentation: Read this README thoroughly
  2. WordPress Forums: Post in WordPress.org support forums
  3. GitHub Issues: Report bugs or request features
  4. Email Support: [your-email@example.com]

Reporting Bugs

When reporting issues, please include:

  • WordPress version
  • PHP version
  • Browser and version
  • Video file format and size
  • Error messages (if any)
  • Steps to reproduce the issue

Feature Requests

We welcome suggestions! Please include:

  • Clear description of the feature
  • Use case / why it's needed
  • Any examples or references

🙏 Credits

Development

  • Developed for creating immersive video backgrounds in WordPress
  • Inspired by modern web design trends

Resources Used

  • WordPress Widget API
  • WordPress Media Library
  • HTML5 Video API

Special Thanks

  • WordPress Community
  • Beta testers and early adopters
  • Everyone who provided feedback

📄 License

This plugin is licensed under the GPL v2 or later.

This program is free software; you can redistribute it and/or
modify it under the terms of the GNU General Public License
as published by the Free Software Foundation; either version 2
of the License, or (at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.

Made with ❤️ for WordPress by Sachin Solanki

Create stunning video backgrounds that captivate your visitors!

Free things may have errors, test and fix things before production use