YT-DLP Web Player

Internet video player powered by yt-dlp

Features

• Daily auto update of yt-dlp to immediately support new yt-dlp codecs and sites
• everything you would expect a modern player to have
• fast loading speed (most videos load in 3s)
• livestream support
• minimalistic UI, configurable theme color
• paste video URL / type search query / auto pasting from clipboard
• zoom to fill for all devices
• download, repeat videos
• optional music visualizer
• browser extension
• PWA

some of these features are off by default and need to be turned on in .env

Main Page (PWA) Paste URL, seach for a video or click enter - when input field is empty, it will auto-fill from clipboard	Vertical Video Support Player automatically adjusts its aspect ratio to each video, in fullscreen you can zoom to fill
Phone App Installable as PWA app - native phone experience, opening links with "share with YT-DLP Player"	Browser Extension Replace all videos seamlessly - consistent UI across every website, no irritating autoplay

Planned

• video quality changing without interrupts
• user-side player configuration

Limitations

• only YT-DLP supported videos work
• video loading times and fallbacks:
  • most videos load in around 3 seconds
  • if it fails, transcoding starts and video loads in around 10s
  • if it also fails, the whole video is getting downloaded until it becomes available
• project is under heavy development - you may expect bugs and issues

Technologies used

• yt-dlp as a video downloader
• videojs as a robust player
• HLS transcoding for the most reliable playback
• ffmpeg for better format support
• node / deno for solving YT-DLP's js challenges
• sponsorblock integration
• Media Session API integration for system playback controls
• Audio Context API for audio over-amplification and music visualizer

How to run

App should be accessible at http://localhost:5000

Docker

• docker run -p 5000:5000 matszwe02/ytdlp_web_player

OR

• Clone repo
• Copy src/example.env to src/.env, modify as needed
• Run docker compose up
• For automatic app updates, see compose.yml
• To enable HTTPS, see compose.yml
  • then you can access the HTTPS app with https://localhost:5001
  • your browser will warn you about not secure connection, you need to click on "allow"

Run locally (Python)

• Copy src/example.env to src/.env, modify as needed
• Create and activate a virtual environment in src/ and install requirements.txt
• optionally install ffmpeg and node/deno, otherwise they will be automatically installed to your venv
• run main.py

Cookies

Some videos need cookies to work. With cookies you will be logged in to the video streaming's website while using the app.

• Create src/cookies.txt file and enable in compose.yml (if using docker)
• Paste relevant cookies into that file (I suggest using an extension for that, which exports cookies in netscape format)
  • yt-dlp created a nice guide about providing the cookies
• If using extension, you can enable automatic sending of browser cookies for individual videos in extension settings

Keep in mind that cookies work the same way as your account credentails - anyone having them may mess up your account.

I do not guarantee that cookies file is completly secure from accessing it through the player. Additionally yt-dlp uses them when playing videos on behalf of the provided account. So I only recommend putting throwaway accounts here.

Browser Extension

Replaces every video in allowed (in extension settings) domains with YT-DLP Player. That results with all of the default video players to be seamlessly replaced with YT-DLP Player

• This extension will disable all media playback on the website, disable native player and create YT-DLP Player's iframe in its place

Chromium Browser Extension

Additionally adds Open in YT-DLP Player context menu for all links. So you can right-click any supported link and it is opened in YT-DLP Player directly

• Install the extension by downloading repo and selecting /extension path to import into browser's extensions. You need to enable developer mode in chrome://extensions
• Put player's URL in extension settings
• In extension settings: enable/disable domains or start/stop temporarily

Tampermonkey script

• Create a new script and copy extension js from player's dropdown menu (or /extension/extension.js)
• In script settings: enable/disable domains or start/stop temporarily
• For some websites you need to install one of disable CSM extensions

Developer Tools script

• copy extension js from player's dropdown menu (or /extension/extension.js) and paste into developer tools
• For some websites you need to install one of disable CSM extensions

Demo, other use cases

Demo server

Low performance and may be IP blacklisted due to this server's limitations

https://ytdlp-web-player.vercel.app

Proof-of-Concept YT-DLP Web Player inside Invidious

https://hub.docker.com/r/matszwe02/invidious_ytdlp_web_player

Sharing

This player fully supports Open Graph - sharing it through social media and messaging apps shows video's title, thumbnail, and allows for direct playback

Embedding player

If you want to embed this player, use /iframe?url=... endpoint

Troubleshooting

I can't install PWA / embed it as an iframe / extension does not load

You need HTTPS for this, see in How to run

I can't play some videos

Please check if it's supported by yt-dlp here.

Also check yt-dlp's issues.

If it appears to be supported, fill in a bug report with app logs.

Can this app do XYZ?

This readme does not mention every configuration option. See example.env and check if the feature you want is already settable. If not, I'm open for feature requests.

Other issues

Please fill in a bug report. Attach browser and app logs if relevant, app version, browser name, etc.

Star History