Introduction to the Smartupworld Video Modal Plugin
The Smartupworld Video Modal Plugin is a lightweight and flexible WordPress plugin designed to allow developers and content creators to embed videos in elegant modal popups using a simple shortcode. Unlike heavy video embedding solutions, this plugin focuses on performance, extensibility, and developer-friendly customization. With a straightforward shortcode, developers can place buttons anywhere on a page or post, and when clicked, they open a modal containing the specified video. This ensures a clean UI design and enhanced user experience without bloating your site with unnecessary features.
In this developer guide, we will cover:
- Lightweight modal implementation for videos
- Customizable button styles using shortcode attributes
- Deferred modal rendering for better performance
- Built-in cache toggle for development vs production
- Simple integration with existing themes and templates
- Extensive customization options for developers
How the Shortcode Works
The plugin registers a shortcode called [video_modal]. When used inside a post, page, or custom content area, the shortcode generates a clickable button. This button opens a modal window containing the specified video file (e.g., MP4) or external video source.
Shortcode Attributes
Here’s a list of the shortcode attributes available:
| Attribute | Default | Description | Example |
|---|---|---|---|
| url | (empty) | The video file or external URL to display inside the modal. | url=”https://example.com/video.mp4″ |
| button | Watch Video | The text label of the button displayed on the page. | button=”Play Demo” |
| href | javascript:void(0); | Optional link behavior. If provided, clicking opens a link instead of a modal. | href=”https://example.com/contact” |
| class | (empty) | Additional CSS classes for styling the button. | class=”btn-primary large” |
Example Usage
[video_modal url="https://mysite.com/uploads/video.mp4" button="Watch Story" class="btn-success mr-2"]When rendered, this will create a styled button labeled Watch Story. Clicking it will open the modal with the specified video. Developers can style the button using theme CSS or custom classes passed through the shortcode.
Developer-Oriented Features
This plugin is built for developers who want precise control over video modal rendering. One of the key enhancements is that modal containers are injected at the wp_footer hook rather than inline, keeping the markup clean around content blocks.
Key Benefits for Developers
- Clean separation of button and modal container HTML
- Dynamic unique IDs to prevent conflicts across multiple instances
- Minimal reliance on external libraries (uses jQuery for backward compatibility)
- Shortcode output wrapped with shortcode_unautop() to prevent unwanted <p> tags
- Optional development mode for cache busting
- Integration-ready with any WordPress theme
Enabling and Disabling Cache (Dev Mode)
The plugin introduces a constant called SMARTUPWORLD_DEV_MODE. When enabled (1), it prevents caching by appending a timestamp to enqueued script and style files. This ensures developers always load the latest version during testing. When disabled (0), a fixed version number is used for optimal caching in production.
How to Toggle Cache
- Navigate to the plugin settings panel under Settings → Video Modal.
- Locate the Development Mode toggle switch.
- Enable it to bypass cache during active development.
- Disable it before going live to maximize performance.
| Mode | Value | Behavior | Use Case |
|---|---|---|---|
| Development | 1 | Assets load with random version number (no cache). | Active debugging, rapid CSS/JS changes. |
| Production | 0 | Assets load with fixed version (cached). | Stable live websites. |
Plugin Settings Dashboard
The plugin includes a Settings → Video Modal admin page to help developers quickly reference how to use the shortcode. This page includes usage examples, shortcode parameters, and toggle options for cache. Developers can extend this settings page to add additional configurations if needed.
Dashboard Options
- Instructions on shortcode usage
- Examples with multiple attributes
- Toggle for Development Mode
- Quick link to plugin documentation
- Contact link for Smartupworld Websolutions
Advanced Customization
Since the plugin is built for developers, almost every element can be extended or modified:
- Override assets/style.css for custom modal designs
- Extend assets/script.js for animations or autoplay behavior
- Replace default button output with custom HTML templates
- Add filters to extend shortcode attributes
- Integrate with third-party video providers (YouTube, Vimeo)
- Attach analytics event tracking to modal open/close actions
Troubleshooting and Common Issues
Developers may encounter issues when first using the plugin. Below are some frequent scenarios and their solutions:
- Button renders but modal doesn’t open: Ensure wp_footer() exists in your theme and that jQuery is enqueued.
- Unwanted <p> tags around buttons: Already prevented with shortcode_unautop(). Check if other plugins are filtering shortcodes.
- Video not loading: Confirm the url attribute points to a valid MP4 or external video file.
- Custom CSS not applying: Ensure class names are passed correctly with spaces preserved.
- Caching issues: Use Development Mode toggle to bypass browser caching.
- Multiple modals on the same page: Confirm unique IDs are generated properly (handled by uniqid() in plugin code).
For debugging tips, consult the WordPress Debugging Documentation.
Conclusion
The Smartupworld Video Modal Plugin provides a clean, extensible solution for embedding video content into WordPress sites with minimal effort. It is designed with developers in mind, offering shortcode flexibility, cache toggling, and an extendable architecture. By separating modal container rendering into the footer, it ensures semantic HTML structure while giving developers full control over styling and functionality.
For professional support, you can reach Smartupworld Websolutions at smartupworldwebsolutions@gmail.com.