Video Lightbox for YouTube/Vimeo is a lightweight, responsive WordPress plugin that displays customizable YouTube and Vimeo video thumbnails that smoothly expand into a lightbox popup overlay when clicked.
- Block editor support: Add a Video Lightbox block, paste a YouTube or Vimeo URL, and choose a custom placeholder image.
- YouTube and Vimeo support: Embed public YouTube videos, Shorts, and Vimeo videos with a block or shortcode.
- Responsive lightbox: Opens video playback in a responsive Colorbox overlay.
- Block styles: Choose Default, Dark, or Cinema presentation styles in the block editor.
- Display controls: Set thumbnail width, height, and autoplay for each block.
- Shortcode generator: Generate a validated YouTube or Vimeo shortcode from Media > Video Lightbox. The provider is detected automatically.
- AMP support: Renders
amp-lightbox,amp-youtube, andamp-vimeocomponents on AMP requests.
- Go to Plugins > Add New.
- Search for
Video Lightbox for YouTube/Vimeo. - Click Install Now and Activate.
- Download or clone this repository into
/wp-content/plugins/youtubefancybox. - Run
composer installandnpm run build:prodif installing from source. - Activate the plugin via Plugins in the WordPress admin.
- Add the Video Lightbox for YouTube/Vimeo block.
- Select Edit video URL and enter a public YouTube or Vimeo URL.
- Optionally choose a custom placeholder image and adjust display settings in the block sidebar.
[youtube url="https://www.youtube.com/watch?v=dQw4w9WgXcQ"]
[youtube videoid="dQw4w9WgXcQ" width="400" height="350"]
[vimeo url="https://vimeo.com/76979871"]
[vimeo videoid="76979871" width="400" height="350"]
| Attribute | Type | Default | Description |
|---|---|---|---|
url |
string | "" |
Full YouTube or Vimeo URL. |
videoid |
string | "" |
Direct video ID (e.g. YouTube video ID or Vimeo ID). |
width |
integer | 400 |
Width of the video thumbnail in pixels. |
height |
integer | 350 |
Height of the video thumbnail in pixels. |
Go to Media > Video Lightbox, enter a YouTube or Vimeo video URL or ID and dimensions, then click Generate shortcode. The plugin validates the input and detects the provider automatically.
- PHP >= 8.1
- Node.js >= 22.0.0
- Composer
# Install PHP dependencies
composer install
# Install JS dependencies
npm install
# Build dev assets
npm run build:dev
# Build production assets
npm run build:prod
# Lint code (PHPCS, Stylelint, ESLint)
npm run lint
npm run lint:css
npm run lint:js
npm run lint:php
npm run lint:php:stanContributions, issues, and feature requests are welcome! Please check out CONTRIBUTING.md for contribution guidelines.
This project is licensed under the GPL-2.0-or-later license.