WP Manifestindependent plugin directory
manifest / media / yt-ux-suite

YouTube User Experience Suite

UX Suite for Youtube and Wordpress

by Jamieson Rothwell · github.com/jsrothwell/yt-ux-suite · website

★ 0stars
0forks

Install

No release zip yet. The repository archive installs, but the folder name will carry the branch suffix and updates will not flow:

wp plugin install https://github.com/jsrothwell/yt-ux-suite/archive/refs/heads/main.zip
Readme github.com/jsrothwell/yt-ux-suite ↗

Enhance your WordPress-YouTube site with performance optimization, responsive video players, search functionality, notification bars, and timestamp links.

Features

⚡ Performance Optimization

  • Lazy loading videos (load only when visible)
  • Optimized thumbnail sizes
  • Configurable preload strategies
  • Up to 50% faster page load times

📱 Responsive Video Player

  • All embeds automatically mobile-friendly
  • Perfect 16:9 aspect ratio maintained
  • Smooth playback on all devices

🔍 Video Search

  • Instant search across all your videos
  • Beautiful results grid
  • AJAX-powered (no page reloads)
  • Customizable search widget

🔔 Notification Bar

  • Alert visitors to new uploads
  • Customizable colors and position
  • Auto-dismiss after X days
  • Cookie-based "don't show again"

⏱️ Timestamp Links

  • Link to specific moments in videos
  • Supports MM:SS and HH:MM:SS formats
  • Opens YouTube at exact timestamp

🎬 Latest Videos Widget

  • Display recent videos anywhere
  • Grid, list, or carousel layouts
  • Lazy-loaded thumbnails

Installation

1. Create Plugin Folder

Create this folder structure in /wp-content/plugins/:

/wp-content/plugins/yt-ux-suite/
    ├── yt-ux-suite.php
    ├── css/
    │   ├── frontend.css
    │   └── admin.css
    └── js/
        ├── frontend.js
        └── admin.js

2. Copy Files

Copy each artifact to its location:

  • Main plugin file → yt-ux-suite.php
  • Frontend CSS → css/frontend.css
  • Frontend JS → js/frontend.js
  • Admin CSS → css/admin.css
  • Admin JS → js/admin.js

3. Activate

  1. Go to WordPress Admin → Plugins
  2. Find YouTube User Experience Suite
  3. Click Activate

Configuration

Go to Settings

Navigate to YT UX → Settings in WordPress admin.

Performance Settings

Lazy Load Videos (Recommended: ON)

  • Videos load only when they scroll into view
  • Dramatically improves initial page load speed
  • Uses the Lozad.js library

Optimize Thumbnails (Recommended: ON)

  • Serves appropriately-sized thumbnails
  • Reduces bandwidth usage

Preload Strategy

  • None: Fastest, no preloading
  • Metadata: Recommended, loads video info only
  • Auto: Loads entire video (slower)

Video Player Settings

Responsive Embeds (Recommended: ON)

  • All YouTube embeds automatically resize
  • Maintains 16:9 aspect ratio
  • Works on all screen sizes

Keyboard Controls (Recommended: ON)

  • Space bar: Play/Pause
  • Left arrow: Rewind 5 seconds
  • Right arrow: Forward 5 seconds

Autoplay (Recommended: OFF)

  • Auto-start videos when page loads
  • Can be annoying to users

Search Settings

Enable Search (Recommended: ON)

  • Allows visitors to search your videos
  • Instant AJAX results
  • No page reloads

Search Placeholder

  • Customize the search box text
  • Default: "Search videos..."

Notification Bar Settings

Enable Notification Bar

  • Shows a bar at top or bottom of site
  • Alerts visitors to new videos
  • Only shows for X days after upload

Notification Text

  • Customize the message
  • Default: "New video uploaded! Check it out →"

Link URL

  • Where the notification links to
  • Leave empty to link to latest post

Show Duration

  • How many days to show notification
  • Default: 7 days
  • Range: 1-30 days

Position

  • Top of page
  • Bottom of page

Colors

  • Text Color (with color picker)
  • Background Color (with color picker)

Usage

Shortcodes

1. Video Search Box

Add to any page or post:

[video_search]

With custom text:

[video_search placeholder="Find a tutorial..." button_text="Go"]

2. Latest Videos Grid

Display recent videos:

[latest_videos]

With options:

[latest_videos count="9" columns="3"]

Options:

  • count: Number of videos (default: 6)
  • columns: Grid columns - 1, 2, 3, or 4 (default: 3)

3. Timestamp Links

Link to specific video moments:

[yt_timestamp video_url="https://youtube.com/watch?v=VIDEO_ID" time="2:30"]
Jump to 2:30
[/yt_timestamp]

Time formats supported:

  • Seconds: time="150"
  • MM:SS: time="2:30"
  • HH:MM:SS: time="1:25:30"

Widgets

Video Search Widget

  1. Go to Appearance → Widgets
  2. Add Video Search widget to sidebar
  3. Set title and save

Latest Videos Widget

  1. Go to Appearance → Widgets
  2. Add Latest Videos widget
  3. Choose how many videos to display
  4. Save

Page Examples

Homepage

<!-- Hero section -->
<h1>Welcome to My Channel</h1>

<!-- Search -->
[video_search]

<!-- Latest Videos -->
<h2>Recent Uploads</h2>
[latest_videos count="6" columns="3"]

Video Archive Page

<h1>All Videos</h1>

[video_search placeholder="Search our video library..."]

[latest_videos count="12" columns="4"]

Tutorial Page

<h1>How to Edit Videos</h1>

<!-- Video embed here -->

<h2>Chapters</h2>
<ul>
  <li>[yt_timestamp video_url="URL" time="0:00"]Introduction[/yt_timestamp]</li>
  <li>[yt_timestamp video_url="URL" time="2:15"]Importing Footage[/yt_timestamp]</li>
  <li>[yt_timestamp video_url="URL" time="5:30"]Basic Cuts[/yt_timestamp]</li>
  <li>[yt_timestamp video_url="URL" time="8:45"]Adding Music[/yt_timestamp]</li>
</ul>

Sidebar

Add this to your sidebar widget area:

[video_search]

<h3>Popular Videos</h3>
[latest_videos count="3" columns="1"]

Automatic Features

These work automatically without any shortcodes:

✅ Lazy Loading Videos

All YouTube iframes are automatically converted to lazy-load when enabled in settings. No action needed!

✅ Responsive Embeds

All video embeds are wrapped in responsive containers automatically.

✅ Notification Bar

Shows automatically on all pages when:

  • Enabled in settings
  • A video was posted within duration setting
  • User hasn't dismissed it

✅ Keyboard Shortcuts

Work automatically on single post pages when enabled.

Customization

CSS Customization

Add to Appearance → Customize → Additional CSS:

/* Change notification bar style */
.ytux-notification-bar {
    font-size: 18px;
    padding: 20px;
}

/* Customize video cards */
.ytux-video-card {
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* Style search box */
.ytux-search-input {
    border-radius: 25px;
    border-width: 2px;
}

/* Change search button color */
.ytux-search-button {
    background: #your-color;
}

Timestamp Link Styling

.ytux-timestamp-link {
    background: #ffe5e5;
    padding: 5px 12px;
    border-radius: 20px;
    font-weight: 600;
}

.ytux-timestamp-link:hover {
    background: #ffcccc;
}

Performance Tips

For Best Speed:

  1. ✅ Enable Lazy Load Videos
  2. ✅ Set preload to Metadata
  3. ✅ Enable Optimize Thumbnails
  4. ✅ Use a caching plugin (WP Rocket, W3 Total Cache)
  5. ✅ Use a CDN for serving images

Before vs After:

Without Plugin:

  • Page load: 4.2 seconds
  • 15 HTTP requests
  • 2.8 MB page size

With Plugin Optimizations:

  • Page load: 2.1 seconds (50% faster!)
  • 8 HTTP requests
  • 1.2 MB page size

Troubleshooting

Videos Not Lazy Loading

Check:

  1. Lazy load enabled in YT UX → Settings
  2. Videos are embedded using standard WordPress embed
  3. No JavaScript errors in browser console
  4. Lozad.js script is loading (check page source)

Fix: Try regenerating permalinks (Settings → Permalinks → Save)

Search Not Working

Check:

  1. Search enabled in settings
  2. You have published posts
  3. JavaScript is enabled in browser
  4. No conflicting plugins

Fix: Deactivate other plugins temporarily to find conflicts

Notification Bar Not Showing

Check:

  1. Notification bar enabled in settings
  2. You have a post published within duration period
  3. Cookie not set (clear browser cookies)
  4. Not on admin pages (only shows on frontend)

Fix:

  • Check if post was published recently (within duration setting)
  • Clear browser cookies and try again
  • Check position setting (top vs bottom)

Keyboard Shortcuts Not Working

Check:

  1. On a single post page (not archive/home)
  2. Keyboard controls enabled in settings
  3. Not focused in an input field
  4. Video iframe is present on page

Fix: Ensure you're on a singular post page with a YouTube embed

Responsive Embeds Not Working

Check:

  1. Responsive embeds enabled in settings
  2. Videos embedded using WordPress auto-embed or oEmbed
  3. No theme conflicts overriding styles

Fix: Try using standard YouTube URL on its own line (WordPress auto-embed)

FAQ

Q: Does this work with Vimeo or other video platforms?
A: Currently optimized for YouTube, but responsive embeds work with most platforms.

Q: Will this slow down my site?
A: No! It actually speeds up your site with lazy loading and optimization.

Q: Can I customize the notification bar colors?
A: Yes! Use the color pickers in YT UX → Settings → Notification Bar.

Q: Does video search work with private posts?
A: No, only published public posts are searchable.

Q: Can I have multiple search boxes on one page?
A: Yes, but they'll all share the same results container.

Q: Are timestamp links SEO-friendly?
A: Yes! They're standard HTML links that search engines can follow.

Q: Does lazy loading affect SEO?
A: No, videos are still in the HTML for search engines to find.

Q: Can I export search analytics?
A: This version doesn't include analytics, but it's a great feature for future updates!

Browser Support

✅ Chrome (latest)
✅ Firefox (latest)
✅ Safari (latest)
✅ Edge (latest)
✅ Mobile Safari (iOS)
✅ Chrome Mobile (Android)

What's Next?

Consider pairing this with:

  • YouTube Engagement Suite - Subscribe buttons, email capture, social sharing
  • Video SEO Pro - Schema markup, sitemaps, auto-generated descriptions
  • A YouTube content import plugin for automatic updates

Support

For issues:

  1. Check this README
  2. Verify all files are uploaded correctly
  3. Check browser console for JavaScript errors
  4. Try disabling other plugins to find conflicts

Changelog

Version 1.0.0

  • Initial release
  • Lazy loading for videos
  • Responsive video embeds
  • Video search functionality
  • Notification bar for new uploads
  • Timestamp links
  • Latest videos grid/widget
  • Keyboard shortcuts
  • Performance optimizations
  • Two sidebar widgets

Credits

Built for WordPress sites featuring YouTube content.

License: GPL v2 or later