Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
Yiannistaos wants to merge 21 commits into
base: main
Choose a base branch
from
Open

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

Yiannistaos wants to merge 21 commits into from

Conversation

@Yiannistaos
Copy link
Collaborator

@Yiannistaos Yiannistaos commented Jan 7, 2026 •
edited
Loading

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

image image image image

Related issues

closes #1458

@Yiannistaos Yiannistaos requested a review from mgogoulos January 7, 2026 09:53
@Yiannistaos Yiannistaos self-assigned this Jan 7, 2026
@Yiannistaos 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
Copy link
Contributor

mgogoulos commented Jan 8, 2026

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

mgogoulos
mgogoulos reviewed Jan 8, 2026
View reviewed changes
mgogoulos
mgogoulos reviewed Jan 8, 2026
View reviewed changes
@Yiannistaos
feat: add right-click context menu with share/embed options on video …
7a8defb 
…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
@Yiannistaos
feat: add showTitle option for embed videos
a12cbd0 
- 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
@Yiannistaos
build assets
743d79a
@Yiannistaos
feat: add showRelated option to video player and embed UI
54121df 
- 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
@Yiannistaos
feat: add showUserAvatar option to video player and embed UI
4b06cab 
- 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
@Yiannistaos
feat: add linkTitle options to embed player
eac08a5 
- Added 'linkTitle' to toggle between clickable and
@Yiannistaos
style: Improve embed options UI and logic
c54e46c 
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.
@Yiannistaos
fix embed options
f1e69f7
@Yiannistaos Yiannistaos force-pushed the feat/video-player-share-embed-options branch from eae5793 to f1e69f7 Compare January 9, 2026 06:46
@Yiannistaos
update static files
2db3e47
@Yiannistaos
Remove test iframe HTML files
82314fe 
Deleted __test-iframe/index.html and __test-iframe/index2.html as they are no longer needed for testing embedded video functionality.
@Yiannistaos
Update default embed options in MediaShareEmbed
30dad5d 
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.
@Yiannistaos
Update MediaShareEmbed.jsx
86009db
@Yiannistaos
Add full-screen video embed example
b2f856e 
Introduces an HTML example for embedding a full-screen video using an iframe, styled for centered display and responsive aspect ratio.
@Yiannistaos
update static files
30e346b
@Yiannistaos
Improve focus and scroll behavior for embedded video player
cdfcf4d 
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.
@Yiannistaos
build assets
68f0f46
@Yiannistaos
feat: remember user's embed video preferences in localStorage
87ccb1b
@Yiannistaos
feat: allow custom width/height in embed options without aspect ratio…
e4db9f1 
… lock
@Yiannistaos
build assets
a50b988
@Yiannistaos
Remove vertical aspect ratios from embed options
47fb75d 
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.
@Yiannistaos
build assets
72e37e7
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@mgogoulos mgogoulos mgogoulos left review comments

Assignees

@Yiannistaos Yiannistaos

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Embed player will make the parent page scroll when loading

3 participants

@Yiannistaos @mgogoulos