Full disclosure: it took us a while to build an iframe because honestly, we love our Web Components experience. I mean, isn’t this great?
<script src="https://cdn.jsdelivr.net/npm/@mux/mux-player"></script>
<mux-player
playback-id="OCtRWZiZqKvLbnZ32WSEYiGNvHdAmB01j"
accent-color="rgb(172,57,242)"
></mux-player>We still stand by that. If you can npm install mux-player or use the script tag up above, we think that’s the best way to get our modern, open source, batteries-included player into your app. It's a good balance between convenience and customizability.
But at the same time, we know there are devs out there who want a simple way to embed video on their low-code/no-code platforms. We know there are devs out there who are just more comfortable with iframes. To you, we say this:
<iframe
src="https://player.mux.com/OCtRWZiZqKvLbnZ32WSEYiGNvHdAmB01j?accent-color=rgb(172,57,242)"
></iframe>Which looks something like this:
You can embed Mux Player by following player.mux.com/ with your playback ID. And you can customize the embed with query parameters; we support most of Mux Player's attributes.
Of course, the story doesn’t end there. Here at Mux, we’re in the business of making video experiences great wherever we can, however we can. With an iframe, we saw an opportunity to add a few dashes of secret Mux sauce…
First of all, if you visit a player.mux.com link in a browser, you get this awesome web page around your video. It’s an easy way to share your Mux Video without spinning up a website.
Second, we’ve added Player.js support so you can programmatically control your video from outside your iframe. No postMessage nonsense. Neat!
The code for that looks something like this:
<script src="https://cdn.jsdelivr.net/npm/player.js@0.1.0/dist/player-0.1.0.min.js"></script>
<script>
const playButton = document.querySelector('button.play');
const player = new playerjs.Player(document.querySelector('iframe'));
player.on('ready', () => {
playButton.addEventListener('click', player.play);
});
</script>And finally, because we generate this HTML on a server, we can do a little bit of extra work to fill in some details. Your iframe automatically comes loaded with Open Graph tags for social, LD-JSON for SEO, and even a blurup placeholder that improves perceptual performance on slower connections. That comes with a trade-off: because we have to do work on a server first, your video is going to load a bit more slowly than if you added Mux Player yourself. In performance-sensitive applications, keep an eye on your Mux Data metrics so you can make sure your users are having the quality of experience you’re looking for.
This is just the start of our client-side journey this year. We’ve got a lot of ideas that we’re excited to tell you about, so stay tuned! (There’s a newsletter signup form down below, and Dave writes great newsletters 😉)
Finally, as you try the iframe out, please hit us up with your thoughts, comments, and concerns on Bluesky, TwiX, or our good ‘ol support page.
