Auto Play Video

A smart video block that automatically plays when it enters the middle zone of the viewport and pauses when it leaves during scrolling.

Description

The Auto Play Video block brings an engaging, interactive video experience to your WordPress site. Instead of requiring users to click play, this block intelligently detects when the video enters the middle zone of the viewport and automatically begins playback. When the video scrolls out of the middle zone, it pauses automatically.

Key Features:

• Automatic Playback Control - Video plays when entering the middle zone of viewport and pauses when leaving
• Smooth Scroll Detection - Uses Intersection Observer API for efficient viewport detection
• Media Library Integration - Select videos directly from your WordPress media library
• Customizable Controls - Show or hide native video controls
• Responsive Design - Works seamlessly across all device sizes
• Muted Autoplay - Videos are muted by default for better user experience and browser compatibility
• Loop Option - Choose whether videos should loop continuously

Perfect for:

• Product showcase videos
• Tutorial content that plays as users scroll
• Portfolio presentations
• Story-telling websites
• Promotional content

Installation

1. Upload the plugin files to the /wp-content/plugins/auto-play-video directory, or install the plugin through the WordPress plugins screen directly.
2. Activate the plugin through the 'Plugins' screen in WordPress
3. Add the "Auto Play Video" block to any post or page
4. Upload or select a video from your media library
5. Customize the settings in the block sidebar

Frequently Asked Questions

Why is my video muted?

Videos are muted by default to ensure autoplay works across all browsers. Most modern browsers block unmuted autoplay videos. Users can unmute the video using the video controls if you have them enabled.

What video formats are supported?

The block supports all video formats that WordPress and your browser support, including MP4, WebM, and OGG.

Does this work on mobile devices?

Yes! The block is fully responsive and works on all devices. However, some mobile browsers may have restrictions on autoplay functionality.

Can I customize the middle zone detection area?

The middle zone is currently set to the center 40% of the viewport for optimal viewing experience. This provides a good balance between early playback and ensuring the video is clearly visible.

Will this impact my site's performance?

The block uses the efficient Intersection Observer API which is designed for high-performance viewport detection with minimal impact on your site's speed.

Screenshots

1. Video block in the editor with media selection
2. Block settings panel showing control options
3. Video automatically playing as it enters the viewport middle zone

Changelog

0.1.0

• Initial release
• Automatic play/pause based on viewport position
• Media library integration
• Customizable video controls
• Loop functionality
• Responsive design

Technical Details

The block uses:

• Intersection Observer API for efficient scroll detection
• WordPress Media Library integration
• Native HTML5 video element
• Vanilla JavaScript for frontend functionality
• No external dependencies

Support

For support, feature requests, or bug reports, please visit the plugin's support forum.