feat: Add video player context menu with share/embed options by Yiannistaos · Pull Request #1472 · mediacms-io/mediacms

Yiannistaos · 2026-01-07T09:53:57Z

This PR significantly enhances the video player sharing capabilities and embed system. It introduces a new right-click context menu for quick sharing and provides comprehensive customization options for embedded videos, including improved responsive design support.

Features

Right-Click Context Menu

Users can now right-click anywhere on the video player to access a custom context menu:

Copy Video URL: Instantly copy the video direct link.
Copy Video URL at Current Time: Copy a link with the ?t=seconds parameter for deep-linking.
Copy Embed Code: Quickly grab the iframe code for external use.
Visual Feedback: Copying actions trigger clear on-screen indicators (via SeekIndicator).
Accessibility: Support for clicking outside to close and the Escape key.

Advanced Embed Customization

The "Share/Embed" dialog now features a suite of new options to customize how the video looks on external sites:

showTitle & linkTitle: Toggle the title overlay and decide if it should link back to the source.
showUserAvatar: Toggle the visibility of the author profile picture in the embed.
showRelated: Control whether related videos appear when the current video ends.
responsive Toggle: Choose between fixed pixel dimensions or a "100% width/height" responsive iframe.
Aspect Ratio Support: Includes a "Keep aspect ratio" option with modern CSS aspect-ratio support for standard formats like 16:9, 4:3, 9:16, and more.
Custom Aspect Ratio: A new "Custom" option allows setting independent width/height values without automatic ratio locking.

Persistent Embed Preferences

localStorage Support: Embed options (except "Start at") are now saved to the browser's localStorage, so users don't need to reconfigure their preferences each time they share a video.

Improved Embed Player Logic

Blackbox Backgrounds: Added a consistent black background to all embed wrappers to eliminate white "letterboxing" on custom-sized iframes.
Simplified State: Cleaned up the embed initialization by relying on unified URL parameter parsing, reducing redundant React prop-drilling.
Smart Defaults: Hardcoded controls to always-on and autoplay to off for embeds, ensuring a consistent user experience that respects standard browser policies.

Testing

Context Menu: Right-click the player, test all copy actions, and verify the ?t= parameter works.
Overlay Toggles: In the Share dialog, toggle Show title, Link title, and Show user avatar and verify the preview updates.
Related Videos: Test the showRelated parameter by letting a video finish in an iframe.
Responsive vs Fixed: Generate both responsive and fixed-size embed codes; verify they render correctly in a test HTML file.
Custom Aspect Ratio: Select "Custom" from the Aspect Ratio dropdown and verify width/height can be set independently.
Persistent Preferences: Change embed options, close the dialog, reopen it, and verify the options are remembered.

Screenshots

Related issues

closes #1458

mgogoulos · 2026-01-08T15:55:14Z

Looks good. I'd suggest we keep the default behavior, which is fixed sized and not responsive...

__test-iframe/index.html

__test-iframe/index2.html

mgogoulos · 2026-01-30T14:42:45Z

@Yiannistaos what's the status here / is it ready by your side?

Yiannistaos · 2026-02-01T15:20:16Z

@Yiannistaos what's the status here / is it ready by your side?

Yes @mgogoulos, this is ready for merge!

…player - Add VideoContextMenu component with copy URL, URL with timestamp, and embed code options - Integrate context menu into VideoJSPlayer with proper event handling - Add visual feedback via SeekIndicator when copying URLs/embed code - Support embed mode with showTitle URL parameter handling - Handle cross-origin iframe scenarios for embed URL generation - Add helper functions for media ID, origin, and embed URL resolution

- Add showTitle prop support to EmbedInfoOverlay to conditionally show/hide title overlay - Add showTitle checkbox option in MediaShareEmbed dialog with URL parameter support - Update embed code generation to include showTitle parameter - Add copy-url and copy-embed visual feedback icons to SeekIndicator - Support showTitle prop in VideoJSEmbed component

- Added 'showRelated' parameter to control related videos visibility at video end - Implemented UI toggle in MediaShareEmbed for the 'showRelated' option - Updated EndScreenHandler to honor the 'showRelated' setting - Modified EmbedPage and VideoJSEmbed to pass the parameter from URL to player

- Added 'showUserAvatar' parameter to control author avatar visibility in embed info overlay - Implemented UI toggle in MediaShareEmbed for the 'showUserAvatar' option - Propagated 'showUserAvatar' through EmbedPage, VideoViewer, and VideoJSEmbed - Updated test iframe index with all 8 combinations of showTitle, showRelated, and showUserAvatar

- Added 'linkTitle' to toggle between clickable and

Refactored the embed options layout to use a grid for better alignment and spacing. The 'Link title' and 'Show user avatar' checkboxes are now disabled and visually dimmed when 'Show title' is unchecked, improving usability and clarity.

Deleted __test-iframe/index.html and __test-iframe/index2.html as they are no longer needed for testing embedded video functionality.

Changed initial states for keepAspectRatio, showTitle, and responsive options in MediaShareEmbed to improve default embed behavior. Also simplified aspect ratio change logic by removing unit options adjustments.

Introduces an HTML example for embedding a full-screen video using an iframe, styled for centered display and responsive aspect ratio.

Prevent automatic focus on the video element when in embed mode to avoid unexpected behavior. Update scroll logic to only scroll the video into view if not in an iframe, or if explicitly requested via a URL parameter, improving user experience for embedded players.

… lock

The aspect ratio dropdown in MediaShareEmbed now only includes horizontal orientation options (16:9, 4:3, 3:2) and the custom option. Vertical orientation options have been removed to simplify the selection.

## [7.4.0](v7.3.0...v7.4.0) (2026-02-06) ### Features * Add video player context menu with share/embed options ([#1472](#1472)) ([74952f6](74952f6))

Yiannistaos requested a review from mgogoulos January 7, 2026 09:53

Yiannistaos self-assigned this Jan 7, 2026

Yiannistaos changed the title ~~[DRAFT] feat: Add video player context menu with share/embed options~~ feat: Add video player context menu with share/embed options Jan 8, 2026

mgogoulos reviewed Jan 8, 2026

View reviewed changes

__test-iframe/index.html Outdated Show resolved Hide resolved

mgogoulos reviewed Jan 8, 2026

View reviewed changes

__test-iframe/index2.html Outdated Show resolved Hide resolved

Yiannistaos force-pushed the feat/video-player-share-embed-options branch from eae5793 to f1e69f7 Compare January 9, 2026 06:46

Yiannistaos added 21 commits February 3, 2026 22:53

build assets

16468e1

feat: add linkTitle options to embed player

f5613c9

- Added 'linkTitle' to toggle between clickable and

style: Improve embed options UI and logic

60d1137

Refactored the embed options layout to use a grid for better alignment and spacing. The 'Link title' and 'Show user avatar' checkboxes are now disabled and visually dimmed when 'Show title' is unchecked, improving usability and clarity.

fix embed options

3d7a75a

update static files

9945e63

Remove test iframe HTML files

b8b6801

Deleted __test-iframe/index.html and __test-iframe/index2.html as they are no longer needed for testing embedded video functionality.

Update default embed options in MediaShareEmbed

2a0928a

Changed initial states for keepAspectRatio, showTitle, and responsive options in MediaShareEmbed to improve default embed behavior. Also simplified aspect ratio change logic by removing unit options adjustments.

Update MediaShareEmbed.jsx

ff47daa

Add full-screen video embed example

6729c6d

Introduces an HTML example for embedding a full-screen video using an iframe, styled for centered display and responsive aspect ratio.

update static files

6e40b38

build assets

59aaa61

feat: remember user's embed video preferences in localStorage

ae2377f

feat: allow custom width/height in embed options without aspect ratio…

ecaa1ce

… lock

build assets

f293f58

Remove vertical aspect ratios from embed options

0753a9e

The aspect ratio dropdown in MediaShareEmbed now only includes horizontal orientation options (16:9, 4:3, 3:2) and the custom option. Vertical orientation options have been removed to simplify the selection.

build assets

2bf622f

Yiannistaos force-pushed the feat/video-player-share-embed-options branch from 72e37e7 to 2bf622f Compare February 3, 2026 20:59

build assets

283d242

mgogoulos merged commit 74952f6 into main Feb 6, 2026
4 checks passed

mgogoulos pushed a commit that referenced this pull request Feb 6, 2026

chore(release): 7.4.0 [skip ci]

8f28b00

## [7.4.0](v7.3.0...v7.4.0) (2026-02-06) ### Features * Add video player context menu with share/embed options ([#1472](#1472)) ([74952f6](74952f6))

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat: Add video player context menu with share/embed options#1472

feat: Add video player context menu with share/embed options#1472
mgogoulos merged 22 commits intomainfrom
feat/video-player-share-embed-options

Yiannistaos commented Jan 7, 2026 •

edited

Loading

Uh oh!

mgogoulos commented Jan 8, 2026

Uh oh!

Uh oh!

Uh oh!

mgogoulos commented Jan 30, 2026

Uh oh!

Yiannistaos commented Feb 1, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Conversation

Yiannistaos commented Jan 7, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Features

Right-Click Context Menu

Advanced Embed Customization

Persistent Embed Preferences

Improved Embed Player Logic

Testing

Screenshots

Related issues

Uh oh!

mgogoulos commented Jan 8, 2026

Uh oh!

Uh oh!

Uh oh!

mgogoulos commented Jan 30, 2026

Uh oh!

Yiannistaos commented Feb 1, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Yiannistaos commented Jan 7, 2026 •

edited

Loading