Skip to content

fix: show seekbar on embedded YouTube players#3596

Open
niveshdandyan wants to merge 1 commit intocode-charity:masterfrom
niveshdandyan:fix/embedded-seekbar
Open

fix: show seekbar on embedded YouTube players#3596
niveshdandyan wants to merge 1 commit intocode-charity:masterfrom
niveshdandyan:fix/embedded-seekbar

Conversation

@niveshdandyan
Copy link

Summary

Fixes seekbar visibility on embedded YouTube players (e.g., Discogs YouTube Player).

The seekbar, progress bar, video duration, and other player controls were not appearing on embedded YouTube players because the CSS rule that hides controls on small-mode players (used for YouTube's native miniplayer) was also being applied to embedded players on third-party sites.

Fixes #3594

Changes

  • Modified CSS selectors in player.css to exclude embedded players (detected via it-pathname starting with /embed) from the control-hiding rules for ytp-small-mode players
  • Added 'embed' as a recognized page type in the pageType() function in functions.js for better embedded player detection and potential future enhancements

Root Cause Analysis

The issue was in js&css/extension/www.youtube.com/appearance/player/player.css lines 43-57. The CSS rule:

.html5-video-player.ytp-small-mode .ytp-chrome-bottom {
    opacity: 0 !important;
    pointer-events: none !important;
}

was hiding the entire .ytp-chrome-bottom element (which contains the seekbar, progress bar, and controls) for all players with the ytp-small-mode class. Embedded YouTube players on third-party sites often have this class when displayed in smaller sizes.

Technical Details

  • The fix uses the it-pathname attribute (set by the extension from location.pathname) to detect embedded players
  • For embedded videos, the pathname is /embed/VIDEO_ID, so we use html:not([it-pathname^="/embed"]) to exclude them from the hiding rule
  • The fix preserves the original behavior for YouTube's native miniplayer and minimized players

Testing

  • Seekbar appears on embedded YouTube players (pathname starting with /embed/)
  • Regular YouTube videos still work correctly
  • Native miniplayer on YouTube still hides controls as intended
  • No regressions in other features

AI Transparency

This PR was created with the assistance of AI (Claude by Anthropic) for code generation and review.

The seekbar, progress bar, and player controls were not appearing on
embedded YouTube players (e.g., on third-party sites like Discogs)
because the CSS rule for hiding controls on small-mode players was
also applying to embedded players.

Changes:
- Modified CSS selectors to exclude embedded players (it-pathname
  starting with /embed) from the control-hiding rules for ytp-small-mode
- Added 'embed' as a recognized page type in the pageType() function
  for better embedded player detection

Fixes code-charity#3594

Co-Authored-By: Claude (claude-opus-4-5) <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Seekbar doesn't appear on embeded youtube videos/playlists🐞

1 participant