WordPress Video Player
The {CODICTS} Video Player plugin provides a unified, responsive video player for WordPress that supports multiple platforms — including YouTube, YouTube Shorts, Vimeo, Instagram, TikTok, Hudl, Facebook, and self-hosted videos — all through a single shortcode.
Installation & Activation
Start by downloading the plugin from the Downloads page on your dashboard on the CoDicts website.
After downloading, install and activate the plugin in WordPress by navigating to “Plugins” > “Add New” > “Upload Plugin” and selecting the downloaded zip file. Click “Install Now” and then “Activate”.
Once activated, you can start using the shortcode immediately. If you plan to embed Instagram videos, navigate to “Video Player” in the admin sidebar to configure the Instagram API settings.
Key Features
| Feature | Description |
|---|---|
| Multi-Platform Support | YouTube, YouTube Shorts, Vimeo, Instagram, TikTok, Hudl, Facebook, and self-hosted HTML5 videos. |
| Unified Shortcode | One shortcode for all platforms — the plugin detects the video source automatically. |
| Consistent Player UI | Built on Video.js, providing a clean, accessible player across platforms. |
| Instagram Modal Player | Instagram videos display a thumbnail preview and open in a fullscreen modal overlay. |
| YouTube Shorts Support | YouTube Shorts URLs are automatically converted to embeddable video URLs. |
| Responsive Layouts | Two layout modes: “fluid” (adapts to video aspect ratio) and “fill” (fills the container). |
| Auto-Pause | When one video starts playing, all other players on the page are paused automatically. |
| Muted Autoplay | Optional autoplay support (muted to comply with browser restrictions). |
| Instagram Metadata Caching | API responses are cached to minimize repeat requests. |
| Author Data Injection | Dynamically displays Instagram post author name and profile image using CSS classes. |
Shortcode Usage
Basic Usage
[codicts-video-player src="YOUR_VIDEO_URL"]Just paste any supported video URL into the src attribute. The plugin automatically detects the platform and configures the player.
Shortcode Attributes
| Attribute | Required | Default | Description |
|---|---|---|---|
src | Yes | — | The video URL. Supports YouTube, Vimeo, Instagram, TikTok, Hudl, Facebook, and direct video file URLs (e.g., MP4). |
id | No | Auto-generated | A unique identifier for the player. Also used as the cache key for Instagram metadata. For Instagram videos, set this to the WordPress post ID. |
autoplay | No | false | Whether the video should autoplay. When enabled, the video is automatically muted (required by browsers). |
template | No | fluid | Layout mode. fluid adapts to the video’s aspect ratio within the container. fill fills the parent container’s dimensions. |
Examples
YouTube video:
[codicts-video-player src="https://www.youtube.com/watch?v=dQw4w9WgXcQ"]YouTube Short:
[codicts-video-player src="https://www.youtube.com/shorts/dQw4w9WgXcQ"]Vimeo video:
[codicts-video-player src="https://vimeo.com/123456789"]Self-hosted MP4:
[codicts-video-player src="https://example.com/video.mp4"]Instagram Reel:
[codicts-video-player src="https://www.instagram.com/reel/ABC123/" id="42"]Autoplay with fill layout:
[codicts-video-player src="https://www.youtube.com/watch?v=dQw4w9WgXcQ" autoplay="true" template="fill"]Supported Platforms
| Platform | Player Type | Notes |
|---|---|---|
| YouTube | Video.js (YouTube tech) | Full support including standard URLs, short URLs (youtu.be), and embed URLs. |
| YouTube Shorts | Video.js (YouTube tech) | /shorts/ URLs are automatically converted to standard embeddable URLs. |
| Vimeo | Video.js (Vimeo tech) | Full support for standard Vimeo URLs. |
| Modal embed | Displays a thumbnail preview; clicking opens a fullscreen modal with Instagram’s native embed. | |
| TikTok | Video.js (HTML5 fallback) | Basic support via HTML5 playback. |
| Hudl | Video.js (HTML5 fallback) | Basic support via HTML5 playback. |
| Video.js (HTML5 fallback) | Supports facebook.com and fb.watch URLs. | |
| Self-Hosted (HTML5) | Video.js (native HTML5) | Direct links to video files (MP4, WebM, etc.). A frame at 0.1 seconds is loaded as a thumbnail automatically. |
Instagram Videos
Instagram videos are handled differently from other platforms. Instead of playing directly in a Video.js player, they use a thumbnail preview + modal approach:
1. The shortcode displays a thumbnail preview that looks like a standard video player with a play button.
2. When the user clicks the preview, a fullscreen modal overlay opens with Instagram’s native embed.
3. Clicking outside the modal closes it.
Tip: For Instagram videos, set the
idattribute to the WordPress post ID where the shortcode is placed. This allows the plugin to cache the Instagram API response and avoid repeated API calls. Example:[codicts-video-player src=”https://www.instagram.com/reel/ABC123/” id=”42″]
Instagram Author Data
The plugin can dynamically display the Instagram post author’s name and profile image on your page. To enable this, add specific CSS classes to elements in your layout:
| CSS Class | Add To | What It Does |
|---|---|---|
codicts-video-player-wrapper | The outermost container wrapping the video player | Enables author data injection for elements inside this container. |
codicts-video-player-author-name | A heading element | The plugin fills in the Instagram author’s username. |
codicts-video-player-author-image | An image element | The plugin sets the image source to the author’s profile picture. |
Elementor users: The author name injection targets Elementor’s heading widget structure (
.elementor-heading-title). Add thecodicts-video-player-author-nameclass to an Elementor Heading widget and the author’s username will be injected automatically. For non-Elementor setups, custom JavaScript may be needed.
The author name and profile image elements are hidden by default and only appear once the data has been loaded from the API.
Layout Modes
| Mode | Shortcode | Behavior |
|---|---|---|
| Fluid (default) | template="fluid" | The player adapts to the video’s aspect ratio within the available width. Great for standard video embeds. |
| Fill | template="fill" | The player fills the parent container’s dimensions completely. Useful for hero sections or background-style video areas. |
Auto-Pause Behavior
When you have multiple videos on a single page, the plugin ensures only one plays at a time. Starting a video automatically pauses all other Video.js players on the page.
Additionally, the plugin adds the CSS class codicts-video-player-is-playing to the player’s wrapper element while the video is playing, and removes it when paused. You can use this class for custom styling — for example, highlighting the currently playing video.
Autoplay
Set autoplay="true" on the shortcode to enable autoplay:
[codicts-video-player src="https://www.youtube.com/watch?v=dQw4w9WgXcQ" autoplay="true"]When autoplay is enabled, the video is automatically muted. This is required by all modern browsers — unmuted autoplay is blocked by default. Users can unmute the video manually after it starts playing.
Autoplay is not supported for Instagram videos (they use the modal player).
Admin Settings
Navigate to “Video Player” in the WordPress admin sidebar. The settings page is only needed if you embed Instagram videos.
Instagram API Provider
Choose which API the plugin uses to fetch Instagram video thumbnails and metadata:
| Provider | API Key Required | Description |
|---|---|---|
| Instagram V1 API (default) | No | Instagram’s legacy oEmbed endpoint. Works out of the box but may be blocked on some server configurations. |
| jsonlink.io API | Yes | Third-party metadata extraction service. Use this as a fallback when the Instagram API is blocked by your hosting provider. |
If you select the jsonlink.io provider, enter your API key in the “jsonlink.io API Key” field that appears below.
Recommendation: Start with the default Instagram V1 API. If Instagram thumbnails fail to load, switch to jsonlink.io.
Instagram Metadata Caching
The plugin caches Instagram API responses as WordPress post meta. This means the API is only called once per Instagram video — subsequent page loads use the cached data. To refresh the cache for a specific video, update or re-save the post where the shortcode is placed.
Theme Integration CSS Classes
The plugin adds dynamic CSS classes to player containers that you can use for custom styling:
| CSS Class | When Applied | Use Case |
|---|---|---|
cvpt-youtube | When the video is from YouTube | Style YouTube embeds differently from other platforms. |
cvpt-instagram | When the video is from Instagram | Style Instagram thumbnails differently. |
cvpt-vimeo | When the video is from Vimeo | Style Vimeo embeds differently. |
cvpt-{type} | For any detected platform | General platform-specific styling. |
codicts-video-player-is-playing | While a video is playing (removed on pause) | Highlight or style the active player. |
These classes are applied to the element with the codicts-video-player-wrapper class.
Custom Event (Developers)
The plugin fires a custom event on the document when a Video.js player is ready:
document.addEventListener('codicts:video-ready', function(e) {
// Player is ready — you can interact with it here
});Use this to hook into player initialization from your own scripts.
Troubleshooting
Video Not Playing
| Cause | Solution |
|---|---|
| Invalid or unsupported URL | Verify the URL is from a supported platform (YouTube, Vimeo, Instagram, TikTok, Hudl, Facebook) or is a direct link to a video file (MP4). |
Missing src attribute | The shortcode requires the src attribute: [codicts-video-player src="URL"] |
| JavaScript error | Check the browser console for errors. Ensure jQuery is loaded and no other plugin is conflicting with Video.js. |
| Embedding disabled by uploader | Some YouTube and Vimeo videos have embedding disabled by the content owner. Try a different video to confirm. |
YouTube Video Shows Black Screen
Before the user clicks play, the YouTube iframe is intentionally hidden and a poster/thumbnail is shown instead. This is by design. If the black screen persists after clicking play, check that the video hasn’t been removed or restricted by YouTube.
Instagram Thumbnail Not Loading
| Cause | Solution |
|---|---|
| Instagram API blocked by your hosting | Switch to the jsonlink.io API provider in Video Player → Settings. |
file_get_contents disabled on server | Your hosting may have allow_url_fopen disabled. Contact your host or switch to the jsonlink.io provider. |
| jsonlink.io API key missing or invalid | Enter a valid API key in the settings when using the jsonlink.io provider. |
| Instagram post deleted or private | The plugin can only fetch metadata for public Instagram posts. |
Instagram Modal Not Opening
| Cause | Solution |
|---|---|
| Instagram embed script blocked | Check that instagram.com/embed.js is accessible from your browser. Ad blockers or content security policies may block it. |
| JavaScript conflict | Check the browser console for errors. Temporarily deactivate other plugins to isolate the conflict. |
| Metadata AJAX call failing | Open the browser’s Network tab in DevTools, click the video thumbnail, and check if the AJAX request returns an error. |
Autoplay Not Working
Modern browsers require videos to be muted for autoplay to work. The plugin handles this automatically when autoplay="true" is set. If autoplay still doesn’t work, note that some browsers and mobile devices have additional restrictions. Autoplay is not supported for Instagram videos.
Author Name or Profile Image Not Appearing
| Cause | Solution |
|---|---|
| Missing wrapper class | Ensure the outermost container around the video has the codicts-video-player-wrapper CSS class. |
| Missing element classes | Add codicts-video-player-author-name to the heading element and codicts-video-player-author-image to the image element. |
| Not using Elementor | Author name injection targets Elementor’s .elementor-heading-title structure. For other page builders, custom JavaScript may be needed. |
| API didn’t return author data | Some Instagram posts may not return author information. Check the API response in the browser’s Network tab. |
Multiple Videos — Only One Plays
This is the intended behavior. The auto-pause feature ensures only one video plays at a time across the page. When you start a new video, all others are automatically paused.
For further support, visit codicts.com or contact us at support@codicts.com.