Video and audio player themes that work for any web player (Video.js, Youtube embeds, and more), and with every web app framework (HTML, React, and more). Open source and built with Media Chrome so they’re fully customizable using just HTML and CSS.

Hey Product Hunters! 👋 First, big thanks to this great community and @mwseibel for hunting this! Back in 2010 I built Video.js, and at the time I put a lot of thought into how other developers would customize the player controls. I was excited to use web technologies (instead of Flash) to build a player and I *knew* other web devs would be too. Fast forward 14 years — Video.js has been used on millions of websites including Twitter, Instagram, Amazon, Dropbox, Linkedin and even in United Airlines headrests. In 99.99% of those cases the default Video.js controls were used with little to no customization. So…huge adoption success, utter failure in sparking creativity. In retrospect, asking people to learn a new UI framework just to style their player was too much. Media Chrome and Player.style are my answer to that friction. * Media Chrome - A suite of Web Components and React Components that let you easily build a media player UI from scratch, using components you’re already familiar with. * Player.style - Themes built with Media Chrome, showing the cross-player and cross-framework flexibility of the Media Chrome components Media Chrome is already used on sites like TED.com, Syntax.fm and anywhere the Mux Player is used. We’ve spent the last few months building some really great themes for Player.style, and we don’t plan on stopping. Thank you to Matt, Wes, Staci, Dar, Rob, Christian, Adam and Dave for helping me finally get Player.style off the ground. And thanks to our company, Mux, for supporting the effort! It’s free and open source, so don’t hesitate to jump in if you’re interested in the project.

@mwseibel @heff Congratulations on the release of Player.style! These tools offer a remarkable solution for customizable video and audio player themes across various web platforms.

This is awesome @heff! Love the video & the design.. very well implemented. Thank you for making it open-source :) I actually used video.js for some sites before, it's nice to see you're still putting great stuff out in the wild! Congrats 🙌

I'm super proud of all the work we've done on Media Chrome and creating amazing building blocks for building custom players, but the barrier to actually making a custom, beautiful player was still pretty high. We've had the legos for a while now, but here's a set of pre-built kits that look great out of the box while still being easy to remix to your heart's content. To put it in meme, these are the "rest of the owl." Can't wait to see these in the wild!

Congrats on the launch! What would you say is the biggest difference from Video.js? What would be the main reason to upgrade?

@semanser great question. Video.js is still actively developed with an incredible group of contributors (I'm still on the TSC). It's obviously a more mature project and that means it's more battle tested in the hardest streaming contexts and has a wider range of professional features. The downside of Video.js comes from the same source, which is that it feels a little dated as you're using it in modern UI frameworks, and it's an all-in-one player which can mean you're pulling in more than you need. Media Chrome takes a different approach from any other web player, in that it's only solving the UI portion of the player, and leaving the streaming aspects to separate "media elements". Among video.js contributors we've been talking about the next major version of video.js, and I hope media chrome can actually get pulled in as the UI layer.

Player.style

Player themes for every web player and framework

Do you use Player.style?