This browser extension provides simple ways to open any YouTube video or playlist (including videos and playlists embedded in other sites/pages) in a configurable "popout" window that can be freely sized and/or positioned.
- Open any YouTube video (including playlists) in a popout player, either as a new browser window or a new tab in your current browser window.
- Open links to YouTube videos and/or playlists from any website in the popout player with a convenient right-click option.
- Show or hide the video player controls in the popout player.
- Automatically resume playback of the video when the popout player opens.
- Loop videos (both single videos and playlists) in the popout player.
- Multiple ways to customize the size and position of the popout player, with support for multiple displays/monitors/screens.
- Optionally close the original video when the popout player opens.
- Configurable keyboard shortcuts for opening the popout player.
- ... and much more!
For more information, head to the YouTube Popout Player website.
| Web Browser | Information & Downloads |
|---|---|
| Google Chrome | |
| Microsoft Edge | |
| Mozilla Firefox |
Contributions are always welcome! Even if you aren't comfortable coding, you can always submit new ideas and bug reports.
This extension is setup to be fully localized/translated into multiple languages, but for now English is the only language with full translations. If you are able to help localize/translate, please check out this guide. All of the text for the extension is stored here in the /src/public/_locales directory.
This extension uses the WXT for development and build processes.
To build the extension from source code, you will need to use Node Package Manager (npm), which handles all of the dependencies needed for this project and is used to execute the various scripts for development/building/packaging/etc.
npm installThen you can run the development process (where the extension is auto-reloaded when changes are made) for your browser of choice:
npm run dev:<chrome|edge|firefox> # ex: npm run dev:chromeOr you can generate a production build for your browser of choice:
npm run build:<chrome|edge|firefox> # ex: npm run build:chromeTo create a release package for all supported browsers, run the following command:
npm run zipTo run the source and workflow lint checks locally:
npm run lint
npm run lint:styles
npm run lint:workflowsTo apply automatic ESLint fixes where possible:
npm run lint:fixThis repo uses github-actionlint to run the upstream actionlint binary from npm-managed tooling. After npm install, lint all workflow files with:
npm run lint:workflowsThe script disables actionlint's optional ShellCheck and pyflakes integrations so local Windows runs and GitHub Actions runs use the same npm-managed dependency set.
To format source, tests, root configuration, helper scripts, and GitHub YAML files:
npm run formatUse npm run format:check to verify that same file set without writing changes. The formatter scripts intentionally use positive globs for non-doc files and do not include docs/**, because the Jekyll site contains Liquid/HTML that is not covered by this Prettier setup.
Area-specific formatter commands are also available:
npm run format:source
npm run format:config
npm run format:workflows