Zoomora supports two types of video: YouTube embeds and local video files. Both types use the same data-type="video" attribute and can live alongside images in the same gallery group.
YouTube Videos
Point data-src at any YouTube URL and Zoomora automatically converts it to an embed before opening. No manual embed URL needed.
Standard YouTube URL
<img src="video-poster.jpg"
data-src="https://www.youtube.com/watch?v=VIDEO_ID"
data-type="video"
data-caption="My YouTube video"
data-zoomora="media-gallery"
alt="Video thumbnail">
Short YouTube URL
<img src="video-poster.jpg"
data-src="https://youtu.be/VIDEO_ID"
data-type="video"
data-zoomora="media-gallery"
alt="Video thumbnail">
YouTube URL with Timestamp
Start the video at a specific time using the t parameter:
<img src="video-poster.jpg"
data-src="https://www.youtube.com/watch?v=VIDEO_ID&t=111s"
data-type="video"
data-zoomora="media-gallery"
alt="Video thumbnail">
Zoomora extracts the timestamp and passes it to the embed as a start parameter automatically.
What Gets Added to the Embed
Zoomora appends two parameters to every YouTube embed URL:
Local Video Files
For self-hosted video files, set data-src to the video file path and data-type="video". Use the src attribute on the <img> tag as the poster image shown before the video plays:
<img src="video-poster.jpg"
data-src="videos/my-video.mp4"
data-type="video"
data-caption="My local video"
data-zoomora="media-gallery"
alt="Video">
Supported formats: MP4, WebM, OGG
Zoomora renders a custom play button overlay over the poster image. Clicking play starts the video and reveals the native browser video controls. When the video ends, the play button reappears.
Format Browser Compatibility
MP4 (H.264) works in all modern browsers and is sufficient for most projects:
| Format | Chrome | Firefox | Safari | Edge |
|---|---|---|---|---|
| MP4 (H.264) | Yes | Yes | Yes | Yes |
| WebM (VP8/VP9) | Yes | Yes | Yes | Yes |
| OGG (Theora) | Yes | Yes | No | Yes |
Mixing Videos and Images in a Gallery
Videos and images can coexist in the same gallery group. Use the same data-zoomora value across all items:
<!-- Image -->
<img src="photo-thumb.jpg"
data-src="photo-full.jpg"
data-zoomora="project"
alt="Project photo">
<!-- YouTube video -->
<img src="youtube-poster.jpg"
data-src="https://www.youtube.com/watch?v=VIDEO_ID"
data-type="video"
data-zoomora="project"
alt="Project video">
<!-- Local video -->
<img src="local-poster.jpg"
data-src="videos/project-clip.mp4"
data-type="video"
data-zoomora="project"
alt="Project clip">
Thumbnail navigation and prev/next arrows work across all item types. The thumbnail strip uses the src poster image for video items.
Important Notes
Zoom is not available on videos. The zoom button is automatically disabled when a video item is active. Zoom only applies to images.
Autoplay is disabled by default. YouTube videos do not autoplay when the lightbox opens. The user must press play. If you want autoplay, you can modify the embed URL in convertToEmbedUrl() to add autoplay=1 — note that most browsers require the video to be muted for autoplay to work.
The src attribute is the poster image. For video items, Zoomora reads the src attribute of the <img> tag as the poster/thumbnail image. Make sure it points to a representative still from the video.
Local videos use preload="metadata". Zoomora sets preload="metadata" on local video elements so the browser fetches just enough data to show the duration and first frame without downloading the entire file upfront.
Next Step
To use anchor tags instead of <img> tags as lightbox triggers, read Using with Anchor Tags. For WordPress-specific setup, see WordPress Integration.