Simple Video Player WordPress Plugin

A lightweight and responsive WordPress plugin that provides a simple video player with support for WebM and MP4 formats. The plugin uses a shortcode system and includes a custom play button with smooth hover effects.

Features

• Dual Format Support: Prioritizes WebM format but falls back to MP4 for broader compatibility
• Custom Play Button: Beautiful SVG play button with rounded triangle design and hover effects
• Responsive Design: Fully responsive and mobile-friendly
• HTML5 Video Attributes: Support for controls, loop, autoplay, muted, and other standard video attributes
• Centered Layout: Videos are centered within a full-width container by default
• Accessibility: Keyboard navigation and screen reader support
• Multiple Instances: Support for multiple video players on the same page

Installation

1. Download or clone this repository
2. Upload the simple-video-player folder to your WordPress /wp-content/plugins/ directory
3. Activate the plugin through the 'Plugins' menu in WordPress
4. Start using the [simple_video] shortcode in your posts and pages

Usage

Basic Usage

[simple_video mp4="https://example.com/video.mp4"]

With WebM and MP4 Sources

[simple_video webm="https://example.com/video.webm" mp4="https://example.com/video.mp4"]

Full Example with All Parameters

[simple_video 
    webm="https://example.com/video.webm" 
    mp4="https://example.com/video.mp4" 
    controls="true" 
    loop="false" 
    autoplay="false" 
    muted="false" 
    poster="https://example.com/poster.jpg"
    width="100%"
]

Shortcode Parameters

Parameter	Default	Description
webm	(empty)	URL to WebM video file
mp4	(empty)	URL to MP4 video file
controls	true	Show/hide video controls
loop	false	Enable/disable video looping
autoplay	false	Enable/disable autoplay
muted	false	Enable/disable muted playback
poster	(empty)	URL to poster image
width	100%	Container width
preload	metadata	Video preload behavior

Parameter Values

• Boolean parameters (controls, loop, autoplay, muted): Use "true" or "false"
• URLs (webm, mp4, poster): Full URLs to media files
• Width: CSS width values (e.g., "100%", "800px", "50vw")
• Preload: "none", "metadata", or "auto"

Examples

Simple MP4 Video

[simple_video mp4="https://example.com/my-video.mp4"]

Video with Custom Poster

[simple_video 
    mp4="https://example.com/video.mp4" 
    poster="https://example.com/thumbnail.jpg"
]

Autoplay Muted Video (Good for Background Videos)

[simple_video 
    mp4="https://example.com/background.mp4" 
    autoplay="true" 
    muted="true" 
    loop="true" 
    controls="false"
]

Responsive Video with Both Formats

[simple_video 
    webm="https://example.com/video.webm" 
    mp4="https://example.com/video.mp4" 
    width="80%"
]

Technical Details

File Structure

simple-video-player/
├── simple-video-player.php    # Main plugin file
├── assets/
│   ├── simple-video-player.css    # Styles
│   └── simple-video-player.js     # JavaScript functionality
└── README.md

Video Format Priority

The plugin prioritizes video formats in this order:

1. WebM - Modern, efficient format with good compression
2. MP4 - Fallback format for broader browser compatibility

Browser Compatibility

• WebM: Modern browsers (Chrome, Firefox, Edge, Safari 14.1+)
• MP4: All modern browsers and older versions
• Custom Play Button: All browsers with CSS3 support

Responsive Breakpoints

• Desktop: Full-size play button (80px)
• Tablet (≤768px): Medium play button (60px)
• Mobile (≤480px): Small play button (50px)

Customization

CSS Customization

You can override the default styles by adding custom CSS to your theme:

/* Custom play button color */
.simple-video-play-button {
    background: rgba(255, 0, 0, 0.8) !important;
}

/* Custom container styling */
.simple-video-player-container {
    max-width: 800px;
    margin: 2rem auto;
}

JavaScript Events

The plugin exposes global functions for advanced usage:

// Reinitialize all video players
SimpleVideoPlayer.init();

// Setup a specific player
SimpleVideoPlayer.setupPlayer($wrapper, $video, $playButton);

Troubleshooting

Video Not Playing

1. Check that video URLs are accessible
2. Verify video formats are supported
3. Check browser console for errors
4. Ensure HTTPS is used for HTTPS sites

Play Button Not Appearing

1. Check that JavaScript is enabled
2. Verify jQuery is loaded
3. Check browser console for JavaScript errors

Styling Issues

1. Check for CSS conflicts with theme
2. Verify plugin CSS is loading
3. Use browser developer tools to inspect elements

Requirements

• WordPress 4.0 or higher
• jQuery (included with WordPress)
• Modern browser with HTML5 video support

License

This plugin is licensed under the GPL v2 or later.

Support

For support and feature requests, please create an issue in the repository or contact the plugin author.

Changelog

Version 1.0.0

• Initial release
• WebM and MP4 format support
• Custom play button with hover effects
• Responsive design
• Full shortcode parameter support
• Accessibility features