FullScreen Video Background 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
• Requirements
• Installation
• Usage
• Widget Settings
• Styling & Customization
• Mobile Optimization
• Troubleshooting
• Best Practices
• Browser Support
• FAQ
• Changelog
• Support
• License

✨ 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