Description

Insert an accessible video player with an optional draggable mini overlay (picture-in-picture style, in-player — not the browser PiP API), optional WebVTT subtitles, and custom controls that work inside modals and page builders.

Live demo

Try the live demo

Features

Main video from a direct file URL or Vimeo
Optional mini overlay video (file or Vimeo), synchronized with the main video — typically sign language, or any secondary video
Optional WebVTT subtitles from your site’s Media Library
Draggable mini overlay window (mouse and touch)
Automatic re-sync when playback drifts
Coordinated asset loading with graceful degradation if the overlay or subtitles fail
Multiple players per page
Works in Elementor popups, Bootstrap modals, and other dynamic content
No frontend branding or tracking

Third-party services

When you use Vimeo URLs, the player loads Vimeo’s embed and Player API. Review Vimeo’s terms: https://vimeo.com/terms

Subtitle files are read from your own site. This plugin does not send visitor data to analytics services.

Development

Source development repository: https://github.com/ahernandezfriz/reproductor-senas

Usage

Basic shortcode:

[ahvpo_player principal="https://example.com/wp-content/uploads/videos/talk.mp4" senas="https://example.com/wp-content/uploads/videos/talk-signs.mp4"]

Full example:

[ahvpo_player principal="https://vimeo.com/123456789" senas="https://example.com/wp-content/uploads/videos/sign-language.mp4" subtitulos="https://example.com/wp-content/uploads/subtitles/talk.vtt" titulo="Accessibility talk" ancho="800px"]

Parameters

principal (required) — Vimeo URL or direct video file URL
senas (optional) — Mini overlay video URL (Vimeo or file); typically sign language or any secondary video
subtitulos (optional) — WebVTT file URL from this site. Leave empty to hide subtitles
titulo (optional) — Title shown above the player
ancho (optional) — Maximum width, e.g. 800px or 100%. Default: 100%

Legacy alias: [video_senas] still works with the same parameters.

Installation

Upload the arielhf-videopip-overlay folder to /wp-content/plugins/
Activate the plugin through the Plugins menu in WordPress
Place the shortcode on any page or post

FAQ

Can I mix Vimeo and self-hosted videos?: Yes. principal and senas are independent. For example, the main video can be on Vimeo while the mini overlay is an MP4 in your uploads folder.
Where should subtitle files live?: Upload .vtt files to your WordPress Media Library. The shortcode must use a URL from the same site.
Does it work inside Elementor popups?: Yes. The player initializes on DOM changes, Elementor popup events, and first user interaction as a fallback.
Is this the browser Picture-in-Picture API?: No. The mini overlay is an in-player picture-in-picture style window inside the player stage. It does not use the browser PiP API.

Reviews

There are no reviews for this plugin.

Contributors & Developers

“ArielHF VideoPIP Overlay” is open source software. The following people have contributed to this plugin.

arielhf

Translate “ArielHF VideoPIP Overlay” into your language.

Interested in development?

Browse the code, check out the SVN repository, or subscribe to the development log by RSS.

Changelog

1.2.0

Renamed to ArielHF VideoPIP Overlay (distinctive display name and slug for WordPress.org).
Prefixed PHP APIs, script handles, AJAX actions, and text domain (ahvpo_ / arielhf-videopip-overlay).
Primary shortcode [ahvpo_player] with [video_senas] kept as a backward-compatible alias.
Clarified in-player PiP overlay vs browser Picture-in-Picture API.

1.1.0

WordPress.org release preparation: conditional asset loading, i18n, security hardening, and documentation updates.
Support for Vimeo and self-hosted videos in any combination.
Optional WebVTT subtitles embedded server-side for reliability.
Coordinated loading with warnings when sign language or subtitles fail.
Popup/modal compatibility improvements (Elementor, Bootstrap).

1.0.22

Vimeo player integration for main and sign language videos.
Mixed source support (Vimeo + local files).

1.0.21

Coordinated asset loading and user-facing load states.

1.0.20

Fixed WebVTT parsing and server-side cue embedding.

1.0.19

Subtitle button styling and version sync.

1.0.7

Robust initialization in dynamic modals and popups.
Sign language window enabled by default.
ARIA improvements.

1.0.0

Initial release.

Description

Usage

Installation

FAQ

Can I mix Vimeo and self-hosted videos?

Where should subtitle files live?

Does it work inside Elementor popups?

Is this the browser Picture-in-Picture API?