Custom Media Players with Media Chrome

Captions provided by White Coat Captioning (https://whitecoatcaptioning.com/). Communication Access Realtime Translation (CART) is provided in order to facilitate communication accessibility and may not be a totally verbatim record of the proceedings.

JASON: Hello, everyone, and welcome to another episode of Learn with Jason! Today on the show we've got Thuy Doan. How are you doing?

THUY: I'm doing good, how are you?

JASON: So good. So, excited to have you on the show. I have been out on PTO for a couple weeks now. I'm ready to get back to it.

THUY: Nice.

JASON: I'm very excited to have you on the show, because we're talking about one of my favorite things, which is video. And I'm really excited to dig into that. We're gonna into some open source, we're gonna get into web components, all that. For those who aren't familiar with you and your work, a bit of a background?

THUY: Let's do it. My name is Thuy. I'm a community engineer at Mux. And people tuning in who may not be familiar with Mux, Mux is the video API for developers. And that's whether you want to build a real-time live, or on demand video application or experience. And I am one of the people who has the pleasure of creating resources for developers like you. Whether that's blogs or videos or coming on to this livestream as a guest in order to help you build whatever video stuff you want.

JASON: I love that. Okay. So, we talked about Mux. But Thuy, I want to hear about you.

THUY: Okay. Yes. My favorite topic.

JASON: Apparently you need to talk fast because Cassidy is on the attack right now.

THUY: I was wondering who is doing the boops. Thanks, Cas.

JASON: If the screen fills entirely, you have to talk like you're under water.

THUY: Okay. At some point it's going to be just like, treading. Me, I once upon a time was actually a marketer. I wasn't a developer straightaway. Fast forward a little bit. I became a project engineer. Worked a little bit on internal tools. Spent a good chunk of time in ed tech. Then I did that pivot into DevRel because I was craving more connection with the community. I wanted to do more creating resources for developers and helping them. And was fortunate enough to do it full-time. Typical DevRel story. And then personally, I'm in the middle of a move right now. Moving into my first house. Not ownership -- but house.

JASON: Oh, nice, nice. That is always -- it's really nice to have a house. Like --

THUY: Yes.

JASON: It is a good feeling. Cassidy paused her boop attack to subscribe. Thank you very much. I also saw that Chris is at 39 months of subscription, which is intense.

THUY: Nice.

JASON: Cassidy, you made a good attempt. I've actually upped the difficulty for the boop flood because of you. So, you're welcome.

THUY: What's the requirement for boops? Is it like you can't -- do you limit the number of click -- I don't know if it's like a Spam?

JASON: They only live on the screen for a little bit. And you -- so, basically, multiple people need to coordinate to do the flood now. Because you can't get of any on the screen fast enough to do it just by yourself.

THUY: Okay.

JASON: So, nana boo boo, Cassidy. Chris, come on. Now we're in trouble.

THUY: She's just gonna get her Discord now to do the boops. She has the power, she has the power!

JASON: There they are. They're working. Great. So, cool, we've mobilized the Cassidy Discord. So, that's what we're gonna do today, I guess. But okay.

THUY: I have a boop!

JASON: We have a lot to talk about today. We're going to dig into video. So, you mentioned that Mux is the -- the kind of video API for developers. It's --

THUY: Yep.

JASON: And so, I talk a lot about Cloudinary for images. You kind of do the -- I use it for a lot of my image processing. You're saying that Mux is sort of a similar general approach where it's like this is developer-focused. You kind of modify things on the fly. How does that -- like what does that work like for me as a developer? I've got a video, I want to use Mux, what do I do? Am I writing a bunch of code? How am I using it?

THUY: I mentioned it said a video API for developers. So, you would -- to take you through the journey. Let's say you want to build something with video. You make an account. You could spend time in post just making requests to things. Creating a video asset, creating a livestream. What else can you create? Create direct uploads? And then you can build something on the frontend and the backend. And use that API underneath to accomplish whatever it is that you want.

JASON: Nice. Nice, nice. That -- so, that's actually not -- like I think we're gonna end up using Mux today. But that's not really what we're talking about.

THUY: Yes.

JASON: We're talking about something Mux built.

THUY: Yes.

JASON: Let's dig a little bit into the back story of this and I'm going to stand on my tip toes so people can see us.

THUY: You're gonna look at my nostrils while we talk.

JASON: Hello, hi. We're doing it. So, when -- when you're talking about video on the web --

THUY: Yep.

JASON: Video on the web is very challenging because it always feels like either you're gonna spend a million dollars on bandwidth or you have to use YouTube or you just like -- like I don't see people not using embedded players. Because it's such a pain.

THUY: Yep.

JASON: It's a huge pain to -- yeah, we've reached point where now my computer is struggling. We'll see how this goes.

THUY: It's funny that you made a swimming comparison earlier because I actually can't tread water. So, we're joking that our head is above water. But like I actually can't tread.

JASON: You're not buoyant?

THUY: I'm not buoyant. I like understand that's technique to be buoyant. But I -- I think I just -- I can't get over the mental. Like the water is near my face thing. I just feel like I'm drowning all the time.

JASON: So, you're -- as you're treading water, you're thinking, the water is too close to my face, I should drown...

THUY: No. No. But I think people who tread water, when I think of it, it seems like it's a natural process for the water to like enter your mouth. You're not gonna drown or anything. It's just because of the way the water moves, it's gonna hit your face. But to me, as soon as water hits my chin, I'm like... it's the end. It's the end.

JASON: You're over it. I get it. Yeah, that's good -- I actually -- I went snorkeling in the ocean. And so, I just had this experience of having to like tread water. What I forgot because I don't spend a lot of time in the ocean. Two things, a snorkel absolutely does not seal over a mustache. My mask was leaking the whole thing. Which made it a lot of fun. Because of that, I snorted salt water, which was unpleasant. And a wave hit me in the face, and I was gagging and trying to tread water and cough at the same time. It didn't go particularly well for me. But I saw sea amenemememones.

THUY: Anemones? 10/10 would do again?

JASON: Yes, I would totally do it. I'm reading the chat. The Vaseline over the mustache, they offered to do that. I don't really want to be covered in Vaseline for the rest of the day. So, no. Anyways, enough about my -- okay. No more treading water.

THUY: Yes. We're talking about video and how it's --

JASON: It's a pain in the freaking neck. It's a pain in the patoot. And I want it to be easier. And it sounds like y'all have been working on something to make it easier.

THUY: Yeah. I -- to give you some perspective on -- on what I felt about video before I started working at Mux. Because coming to work at Mux is the first time I started in video and saw for the first time how big the ecosystem is or what parts are involved in video infra. So, before I joined Mux, I thought video was collected already. But all I really thought was, players. Player options out there suck and I don't have a lot of control over the players. Then I came to Mux. And then, you know, the company gives you training and there's a giant system diagram about what's involved with video infra, hosting, encoding, distribution. And it made video even more scary. But then I found out that Mux has a bunch of features and a bunch of products that make it easier for developers. One thing is like making the cost more affordable and more easy to understand when it comes to like storage, for example. And then on the open source side, the open source team has been working on things like Media Chrome that make even just the player part of video infra just a little bit better for people.

JASON: Yeah. Because there are a few thing like, you know, it's interesting because I feel like in -- in my journey through the Internet, right? Like I would always offload anything that was heavy to another service. You're uploading video to YouTube because YouTube doesn't charge you for bandwidth, right? But then your whole experience is locked inside of YouTube.

THUY: Yeah.

JASON: And you've got issues where you have to follow YouTube's rules and there's this looming threat where if you make a mistake, you could get your whole thing taken down with no notice. And it also creates a lot of incentives that I don't know are -- like in a lot of cases, not the incentives you want. Like I don't necessarily want some of my videos to have this sense of like, well, we didn't get maximum view count and so, this video was a failure. Not everything needs to be, you know, matching an algorithm or playing that game. Sometimes you make something because it's useful and it's okay that it's niche and not that many people in total are gonna watch it. Because the people that do watch are gonna get a ton of value. There's just all these weird incentives when you start going the social media route with video.

THUY: Right.

JASON: But in an S3 bucket and sending it to people, it's exorbitantly expensive to send it to people and get that traction. Services like Mux make that easier by optimizing the format and things like that. But then you run into the problem, okay, I want people to be able to play it. And you use the native video elements. It's fine.

THUY: It's not exactly what you want.

JASON: Yeah. And it's kind of hard to do stuff with. It's always pointing you back, maybe I'll use a different service like Vimeo or Wistia or any of these others that are out there. They'll host it, do the streaming and give you a custom player that's easier to style up. Now I'm playing a different game. Now I'm paying for this very expensive annual service that all I really wanted was a custom media player.

THUY: Yes. I'm --

JASON: And so, what I find exciting is what you're talking about with this open source component here, called Media Chrome, right?

THUY: Yes, Media Chrome.

JASON: So, Media Chrome is offering an un-opinionated way to play video from any source, right?

THUY: Yes.

JASON: If I have an MP4, Mux video, anything, I can throw into this and get a good experience that I can customize.

THUY: Yes. So, for me, before coming to Mux, I would say that my top pain points in finding a player were -- well, number one, it was I couldn't get it to look exactly the way that I wanted. So, there is a play their exists out there. The controls are the way they are. And maybe you can change the color. And maybe you can add a logo.

JASON: Right. And we want to go full Winamp.

THUY: Yes. We want to go full customization. But talking to you, it sounds like other issues that you've had being on other video platforms where they have stricter rules on what it is that you can do, other problems seem to be cost and what's the other one? Oh, like strict rules. Let's say you're using YouTube, you have to have a video host on YouTube and can't have it hosted somewhere else. Those sound like the top problems I'm hearing. Would you say so?

JASON: Yeah.

THUY: Yes. So, with Media Chrome, because of the way our open source team built it, they separated out the concerns. The concerns being the media source and the controls. So, what happens in the end is because of the separation of concerns, you have greater control and you have greater control and freedom over what the player looks like and greater control and freedom over where you host your video. Which were some of the biggest problems. People couldn't choose. Okay. Cool. Maybe we have a free player, but there are restriction over here. But now the world is your oyster. The world is your oyster with Media Chrome.

JASON: Yeah. And I do love that. And I'm starting to see just a slight bit of video stuttering which is super-ironic. So, let's just keep our fingers crossed here that nothing goes wrong with the stream today. We have -- I'm actually really nervous because we have people working on our house today. We have chimney work happening. And yesterday they blew the breaker and took my whole house down. So, if at some point, viewers, this just goes dark, I apologize. And we will reschedule. But I think we're gonna be okay. I have faith in us. But all that being said. So, yes. So, a customizable web video experience is really great. And then the other thing about it too is like making it feel approachable. Like I -- when I want to put something on the Internet, I don't necessarily want to spend all my time like laying the foundation to build the thing that I want. I just want to be able to build the thing that I want. So, if I have an idea for say I want to build a course site. Or I want to, you know, provide -- I'm doing a conference and I want to embed a video that's not necessarily on YouTube. Or I want to do like a bonus content that I wouldn't put on YouTube. And it's like something that you go to from -- just anywhere I really want to control the experience. What I want to be building is the experience, right? I want to

THUY: Yes.

JASON: I want to build out the value for the people who are coming to watch those videos. I don't want to spend days or weeks building out my own custom media player. That's a distraction from building the thing I want to build. I'm going from minimum time to get up and running with an idea and to be able to actually deliver on the vision, not on the foundations that enable the vision.

THUY: Yeah. You -- so, something that I want to focus on that you talked about was the building part. And I want to stress something about Media Chrome for our viewers. Which is Media Chrome is actually not a video player. So, we talk about it being able to make video players. But it is -- it is not a video player. It's actually a tool kit. It is a lower-level tool kit, lower level than a media player. A tool kit that you can use to modularly put together the media player of your dreams. Okay?

JASON: Okay. Cool. Okay.

THUY: Yes. That's what I really want to stress. It's not a video player. But it enables you to build a video player.

JASON: I got you. Cool. Okay. So, then that is a good distinction. Because I hadn't actually picked up on that when we actually talked about it. So, what else can I built with Media Chrome?

THUY: So, because it's a tool kit forked by media players, yes, you can build video players, but you can also build audio players because audio is media. So, you wanted to build something like Spotify web player, you could. If you wanted it build something like the Netflix player, the YouTube player, the Vimeo player, you could too.

JASON: Okay. So, that's cool. All right. Well, what -- so, how -- how is this built? Like is it built using a framework? Is it, you know, what do I need to install if I'm gonna use it?

THUY: Okay. Good question! Good question! So, media player -- I mean, Media Chrome -- is built with web components. And for people who may not be familiar with web components, they are custom HTML elements. What does this mean if it's a -- if they're built with custom HTML elements? It means that you do not have to use or install a framework like React or Vue to use Media Chrome. You can just use straight vanilla HTML. But! If you wanted to use it with a framework, you could and it would all be fine. Slight little caveat with React. But virtually, it's all gravy.

JASON: I do love gravy. We were talking poutine in the chat earlier. We're on brand, on theme here.

THUY: Everything is full circle. There is a reason. That's connection.

JASON: Okay. Great. So, I don't think I have any other questions that aren't going to result in me needing to look at a screen. I'm going to switch us over into pair programming mode.

THUY: Okay. Let's do it.

JASON: Okay. Now, this needs to be off the screen. And I'm going to start out by doing a quick shoutout. We've got Amanda here today from White Coat Captioning taking down everything we're saying. Thank you so much for that. And that's made possible through the support of our sponsors, Netlify, Nx, and New Relic, all kicking in to make this show more accessible to more people. Which I very much appreciate. And we are talking to Thuy. So, make sure you head over and say what up. Give a follow. Do all the good things. If you want to follow along with the captions, they are on the home page of the site, learnwithjason.dev. And we are talking today not about Mux directly. But we will be playing with a little bit of Mux stuff.

THUY: Yep.

JASON: If I want to mind this Media Chrome, how does one find that?

THUY: I think a good starting point for this would be the docs.

JASON: Okay.

THUY: Let me share with you so we can get it shared with the audience. Actually...

JASON: A GitHub repo.

THUY: I don't know why I sent it in our private real-time chat. I could have just sent it on Twitch. We're slow today. Everybody, these are the docs. You can start here. Get started with Media Chrome.

JASON: Got it. All right. So, here is documentation. And I'm gonna re-share these because I've got a thingy set up that puts all of the links that I share into a place so that they end up in the show notes.

THUY: Yeah.

JASON: And then this is the home page for it, right?

THUY: That is -- that is a site that we have for it. I do like this in that -- so, the cool thing about this site is you can hover over certain parts that make up a play we are Media Chrome and you can see. Especially if you're visual -- especially if you're visual -- you can hover over these and it will tell you which part of the media play their specific part links to with the links underneath. But the link that I sent in the Twitch chat is where we would start coding with. Yes.

JASON: Gotcha. Okay. So, with that, I have nothing open. So, I'm going to... let's go to the terminal here. And then I'm gonna go to here. And should I start a certain type of project?

THUY: Okay. Okay. So, remember when we talked about how Media Chrome is built with web components which is custom like HTML elements? And that we don't have to install a framework or anything. We can just use plain, vanilla HTML. Well... because we can do that, we don't need to be in the terminal. We can just open a code sandbox.

JASON: Oh. We can open a code sandbox. All right, all right, all right. Let's do it.

THUY: Code sandbox time!

JASON: Okay. So, I have --

THUY: Okay.

JASON: I'm gonna sign in here.

THUY: Yes.

JASON: Okay.

THUY: So, from here, I believe Code Sandbox has -- you can just click a new sandbox, and I think it will tell you. Yeah, pick just vanilla HTML, or wherever HTML is, yes.

JASON: Okay. Here's our vanilla.

THUY: Beautiful, beautiful. We will not be using any index JS situation. We can just hang out in index.html land.

JASON: Got it. Let me just drop this, then. Okay. I'm ready.

THUY: Okay.

JASON: Keep this to keep us from getting confused, then.

THUY: Sounds good. From here, let's go to the getting started docs that I posted in the Twitch chat. And we can kind of go back and forth between the docs and our Code Sandbox editor.

JASON: Put like -- I don't know why it doesn't have the actual style sheet in here. So, I'm going -- maybe that was included in the JavaScript. But I don't know if there was actually anything in it. Yeah. Okay. That's written. Back to the docs I do.

THUY: Yes. So, from here, under Getting Started, there is -- if you scroll down to the hosted option. In Code Sandbox, we can just copy this script tag.

JASON: Got it.

THUY: Stick it in an HTML file, and we're good to go.

JASON: Okay.

THUY: Awesome.

JASON: It is done. And I'm gonna close. Can I make this go? Yeah, I can. Close that so I can see more of what's going on.

THUY: I just want to address a comment, oh, no, the CSS has started. And I know how you feel. Okay? If I don't have to do CSS, that would be great. If I have to, I can. But I'm hoping that what we're about to do when we get to the styling section will make you feel better about styling your media player.

JASON: Yeah. My -- my issue is always that once I start, I'll like sit and tweak it for the whole episode. Like when I'm solo, I'll be like, I'm gonna build a real-time thing today. And then I spend like 70 of the 90 minutes just style up a div. And then I'm like, oh, no, I'm out of time.

THUY: Well, we'll see. We'll see how that goes. But here. So, we have our script tag.

JASON: Yes.

THUY: I think we can get started by, if we go back to the docs. Our wonderful docs. If we scroll down into -- I think scroll down some more into customizing controls. This is a good snippet to copy to get started. We can kind of talk about what are the major parts.

JASON: Okay.

THUY: In a media player built with Media Chrome. Go back to the Code player and paste in there. Your Code sandbox, I mean. Da, da! Okay. We have what seems like a media player here. Let's talk about what it is -- what are the major components that we're looking at here with this media player? So, earlier I talked about how users get the level of customization that they want and seemingly crave because we have separated out those concerns and you can see them here. The first thing that I want to draw your attention to, everyone, is the -- all the little controls are media components under media control bar in the HTML. So, we have the media play button, media mute button, media volume range, all of those are the UI controls that we're gonna be interacting with. By themselves, they are just presentational. Okay?

JASON: Oh, so, they don't -- do they not do anything right now?

THUY: They do something right now, but I'll tell you why that is.

JASON: Okay.

THUY: The second thing to draw your attention to is the video tag, video slot, video source, yada, yada. That is our video source. Right now the video is a Mux video. But I assure you, we can use videos that are not Mux. We can get to that. But that is the media source. And then the third thing that I really want to draw your attention to is the media controller. That thing, you know, time and time again, we'll talk about how there are lesser smart components and smart components. Media controller... lesser smart, we know what we're saying here. So, media controller is the thing that runs the show. The controls under media control bar, they don't know about the media source. The media source doesn't know about the controls. Media controller, however, is what listens to the events that are emitted when a user clicks on a control. Okay? And then when the media controller hears those events, they will do something with the media source. So, for example, If the user clicks on media play buttons, there's gonna be an event emitted that's like the play event. Media controller is like, ah! Just heard the play event. Let's trigger.play on the media source. And that is why, although the controls are presentational components by themselves, because the media controller is there and everything is inside the media controller, that flow of information is what makes it possible. So, if you click play, a video. Well, I guess people can't here. It's not important. But the video is playing.

JASON: Right. So, that's -- that's cool. And what I like about this is that but default, by just kind of copy-pasting this stuff, it works. I can embed this right now. No more work. I am now good to go. And this is intuitive enough that I can see things like I don't want picture-in-picture. So, I'm just gonna do that.

THUY: Yes! Yes!

JASON: Boom, gone, right? That I think is one of the really cool things here. Is that I'm not trying to like -- one of the things that I've noticed with a lot of custom players that gets really challenging is that you're getting something that comes with a lot of built-in styles and a lot of built-in --

THUY: Yeah.

JASON: Assumptions. And so, then when you want to change them, you're having to copy-paste the whole -- the whole stylesheet and then figure out which piece of the stylesheet is relevant to which element in the thing. Those can be well-designed and pretty easy to manage. But it's still a thing you have to manage. You have to get in there and really reverse engineer the way that this component is put together. And so, the nice thing about having it in out in front like this with just the custom elements is these are self-descriptive enough that I can -- before I do anything, I don't have to dig in and figure out how this thing is constructed to like figure out how to, you know, do a display none on an event -- on an element that I don't want or something like that. Instead I can say, I don't want this deleted. That is super-cool.

THUY: When you look at media controls, it's very clear which ones are there. You can also easily rearrange them. So, they appear in the bottom bar there in the order that they are in the DOM. If you're like, I want the play button to be at the end for whatever reason, you could totally do that.

JASON: Yeah. It's really handy.

THUY: Yes. There is a question, Adrian says is there a custom overlay a la Netflix. I believe there's a overlay possible. We can get into that a little later. But for now, let's go incrementally from this point. Okay. So, we -- we are familiar -- at this point we're familiar with the major players inside of the component. We see that the player controls are pretty intuitive. They're listed. They render in the order that they're listed. And the DOM, we can easily rearrange them. From here, what if we -- okay so, back in the day when you used other video players, have you ever had the -- the feeling that you wanted to move video controls somewhere else? Like have you ever been like, I don't really like all the buttons at the bottom. Maybe put them somewhere else? Or are you somebody who likes them all at the bottom.

JASON: No, depending on the use case. One of the things that I like about, say, Netflix is that you have -- you know, you've got your control here is and a couple items up here and info over here. Like, it's a little more, it feels integrated. It's not we slap ad a video into a pre-made player and the controls are always like this at the bottom and there's nothing you can do it about it. I do like the idea of being able to mess with it, within reason, chat. Let's not get wild here. You can start to make it feel more like your own brand. I think. If you are intentional about like moving a little bit of stuff in a way that makes it feel yours.

THUY: Yes. I -- I want to -- I want to do a little bit better about monitoring the chat. So, somebody asked what about keyboard shortcuts? So, I wanted to point this out because they are well-documented in the docs. We could also play around with them a little bit. So, in the docs, I will paste in the Twitch chat just so that everybody can see. There is a section called keyboard short cuts and it outlines all the keyboard short cuts that you're able to use with a media player built with Media Chrome. A cool feature related to keyboard short cuts that we can take a look at is you can actually disable the keyboard short cuts if you want for whatever reason. You can disable all of the keyboard short cuts, you can disable specific keyboard short cuts. So, there are keyboard short cuts built-in. We could take a little segue into short cuts so people can see what's available.

JASON: Okay. If I hit M, it's muted. If I hit F --

THUY: Okay. So, this is an interesting thing. Do you see errors at the bottom of your...

JASON: Yes.

THUY: Something about full screen. Okay. So, the full screen. This is what I found out when I was working with this myself. There's just some interesting stuff going on with the code sandbox preview that they prevent you from like using full screen capability is what I understand.

JASON: Okay.

THUY: Yes. However, if you copy that little URL above the player and open it in another window, if you try to full screen, it will work there.

JASON: Oh, I think -- is this because of -- I bet it's because of iFrames.

THUY: Yes, my, Dillon, he heads the open source team. He says it fullscreen doesn't work in code sandbox. That's the secret.

JASON: Now it does work. I'm hitting F and it's just doing the thing. Right? So, that's good.

THUY: Yep.

JASON: And then I can mute. And I can go, like left is --

THUY: Yes.

JASON: Jumping. Right is jumping. This is actually like wonderful, right? All very good.

THUY: Very nice. Okay.

JASON: Side quest complete!

THUY: Yes! Keyboard short cuts! Good -- good question. Good question, friend. Speaking of keyboard -- does it keep the media controls tabapple?

JASON: Tabable. Yep, I'm gonna tab. Yep, there they are. Whoops. That is not the button I was trying to push.

THUY: So, speaking of, I want to do a quick shoutout to the open source team. Speaking of keyboard NAV, speaking of accessibility. Jason knows this from the time that we've done slows with remotely interesting on Netlify. But I'm very, very passionate about accessibility, which is why I feel super happy and blessed to be working in close quarters with the open source team. But our open source team, they, I think, are really strong implementers of the ideology to shift left. Which is not leaving accessibility to the end. Not leaving accessibility as an afterthought. They really incorporate -- our team really incorporates accessibility from the design stage from the beginning to the point where we actually recent -- so, we built our own custom player called Mux Player which works with the Mux platform. But this Mux Player was built with Media Chrome.

JASON: Oh, cool.

THUY: Yes. And we actually worked with a third-party to audit the play their we built with Media Chrome to see, you know, yes. We have this philosophy. Yes, we've paid attention to accessibility. But how -- how does it really measure up? What else can we do? What can we improve? And the results that we actually got back were pretty good. There are some things that are working to fix. But we didn't get a lot of violations or -- because it's not all just a checklist. It's not all.

JASON: Yeah, you can only robot check so many things in accessibility. You need people to do testing.

THUY: Yes. I really want to stress to people who are considering building their own custom player with Media Chrome and you care about accessibility and you care about a player that is usable by as large of an audience as possible and is inclusive, Media Chrome. Media Chrome. Has thought about this. Use it.

JASON: Awesome. Inferno ripper, yes, you can change the styling and position. We're going get into that right now.

THUY: Yes.

JASON: Knight wave is asking does the Media Chrome have anything to do with the Chrome browser.

THUY: I don't know the answer to this, actually. But Dillon, if you could answer that. But in terms of changing --

JASON: Chrome is unrelated to the Chrome browser as Dillon says. Yeah. Inferno ripper is excited about customizing positions and styling. I'm excited about it. Let's do it. Let's mess around.

THUY: Okay. So, the person said they were joking when they were saying that, or at least partially. Oooo... CSS. But I'm really pumped to share this part. Because as a CSS half-hater, I really love that this makes the whole positioning controls thing easier. So,...

JASON: I think we found the first thing that is gonna fuel our -- fuel our -- like eventual nemesisness.

THUY: There's room.

JASON: Half-nemesis, then.

THUY: We'll accept it.

JASON: You were excited because we don't have to write a lot of CSS.

THUY: It's not CSS-less, but I want to show -- let's talk about positioning. Let's talk about layout.

JASON: Let's do it.

THUY: So, in Media Chrome, we use something called slots to help make for example positioning and other levels of customization easier for you as a user. For the people who may not be familiar with the term "Slots," in the realm of web components, slots are place holders. That's what you can think of slots as. So, for example, if you take the play button, we've made it so that you can optionally slot in or pass in your own custom play button or SVG.

JASON: Whoa...

THUY: But it's not just the play button. The slots exist in many places with Media Chrome. But just as an example. So, you can pass your own play button, SVG. Whatever. If you don't, it will just render the default play button that we've defined.

JASON: got you.

THUY: In terms of layout and positioning, if you want to go and put controls at the top or go and put some of your controls in the center, you can go and use a slot and it will just magically, magically.

JASON: Let's do it. I want to move the control to the top. Do I just add a slot to? No, that wasn't it.

THUY: Okay. So, what we can do is above the media control bar, let's make a div.

JASON: Okay.

THUY: Let's make a div. You can do a slot. Slot actually is -- let me just make sure that I remember exactly -- it should be top Chrome. Top-Chrome. Let me see. So, inside -- inside of the div, let's just pick a button that you want to appear at the top.

JASON: Okay. We're moving the play button.

THUY: Moving the play button.

JASON: Hey! Here we go!

THUY: Magic. Yeah, you have two play buttons, they will actually both work.

JASON: That's cool.

THUY: That's the top realm. Another popular one, I don't know if all players have this, but I feel like I expect a play button in the center. But we can also do something similar in the center. We can make another div. Make another div.

JASON: Center Chrome?

THUY: I believe it's centered, e-d. c-e-n-t-r-e-d.

JASON: With no Chrome?

THUY: With Chrome. But centered of center Chrome, it's centered Chrome.

JASON: Got it. I'm gonna cut this one and put it in the top here. Oh, right. Gonna close the thing.

THUY: Oh, what does a knock mean? Somebody was knocking.

JASON: Yeah. That was -- that was the chat letting me know that I wrote bad code.

THUY: Oh, okay. Just an oopsy.

JASON: Little whoops.

THUY: Little whoops. Another thing that we can move to -- oh, we actually don't have any of these controls here. So, for me, I really like to be able to seek. We don't have any seek controls right now. So, why don't we -- why don't we go and add some maybe into the centered Chrome area. Maybe put the seek back. So, we can do media. Seek forward. Button. Button. Yep. We got a seek. And let's add a -- because what if we want to go back? If we could only go forward, I don't know. We might miss stuff. Sometimes I watch a movie and I'm like what do they say? Let's go back. So, it's actually -- it's backward.

JASON: Backward. Forward, backward, that makes sense.

THUY: Yes. Yes. Some additional customization.

JASON: My brain did not --

THUY: Next to each other.

JASON: What is the right way to do that?

THUY: What do you mean?

JASON: Seek back -- yeah, you would seek back first and then you would do -- oh, that is weird. My brain shorted out with that.

THUY: Would you feel less weird if the seek backward button was before the play button? Ah, does this feel --

JASON: Yes, I feel less weird about that.

THUY: Everything is right in the world.

JASON: Struggling here. Good.

THUY: I think this is a good opportunity to just mention what you can do additionally with the seek backward and forward buttons. So, we have an attribute that allows you to change how much you can seek forward and backward. Because right now I believe --

JASON: Oh, okay.

THUY: It's 30. But you actually can change how much you can seek back. So, you can do on let's say seek backward you can add an attribute called seek-offset. Equals and then the number of seconds that you would rather it go back by.

JASON: Oh, and it's smart enough to update. Let me make this bigger so that everybody can see. This says 15. And this says 30. Because I updated the seek backward. So, they're independent too which is super-cool. So, let's do that. Now we've got 15 forward and backward. So, that is very nice.

THUY: Very nice.

JASON: Thank you for the sub. Oh, that is good question. Can that be percent of total length instead of fixed seconds? That kind of feels like a UX nightmare to be honest. That would be super-confusing.

THUY: According to the docs, it's time in seconds. But the open source team is always open to feedback. So, if you for whatever reason want percentage, the answer is that is not available as far as I know. But if you want to submit an issue, you can pitch something.

JASON: And if you're using something like Mux, I can -- we could programmatically get this because we can figure out how long this video is and then do a little math, right?

THUY: You probably could. Hola! Yes, yes. So, some other layout stuff that we can do is let's say -- so, right now we have the play button in the middle with the seek backward and the forward buttons there. But what if we only want that there on desktop. Or we only want that there on mobile? We can use media queries to be like, oh, I only want the centered buttons there for whatever reason that you want. And then in the other condition, you can have your play button and your seek buttons at the bottom.

JASON: Okay. I'm just gonna put the styles right in here, in fact. That feels easier than jumping between files. So, if I do media, how are you doing on like viewport width? Or are you doing something different?

THUY: So, we can do -- I don't know what the best way is, but the way that I do it, I'm used to doing it, is I -- I believe minimum width and then pixels. So, we can do something like that.

JASON: Okay. So, let's do like 500 pixels would be like a good -- a good thing. How are you targeting? You could just do like a target?

THUY: You could do classes -- so far, I think the class might be --

JASON: A little easier?

THUY: Whatever way you're comfortable, you could do a class.

JASON: Desktop-only. And then we'll do desktop-only. And then we'll do display visible. Or no, display block. And before that, we'll make it display hidden. So, then as we make this bigger and smaller, it should disappear. But it's not because I did what wrong?

THUY: Some of the buttons went away. The -- I should stop leaning in away from my mic. The...

JASON: Yeah. Weird. What did I do? Display none. How CSS works is the -- okay. So, now we've got this. And then as I get bigger... that should be gone. And that's...

THUY: I actually had trouble with this too when I was -- okay. CSS debug time, friends. Let me just open all these windows here.

JASON: Okay. Let me do something outside of this as well. And what we can do is H1, color red. And color blue. And it is...

THUY: Your H1 is gone.

JASON: Yeah, what's happening here? What is... hello? Let me save.

THUY: Okay.

JASON: Okay. I've reloaded.

THUY: Refreshed.

JASON: Test is blue. Now if I make this smaller, it goes red. The DOM got out of sync. Now that I've reloaded, the media query works.

THUY: Yes. Here we go.

JASON: Maybe some code sandbox quirk there is.

THUY: Yes. You can control -- not only can you customize which controls are there, when they appear, you can also control how they appear on different screens.

JASON: Okay.

THUY: Very nice.

JASON: Drop this one out. And we're back to -- okay. So, now we've got... boom. Look at it go.

THUY: Nice. Okay. So, at this point I -- we could change it into choose your own adventure. Do you want to continue down the slot route? Which is maybe we can replace the play but the within a play button of your style, a seek button of your style. Or we can get into some CSS variables that will allow you to make stuff really customized like the color of the time range, the color of the little circle and so on and so forth?

JASON: Let's start with the CSS variables. And then let's -- if we still have time, we'll finish with a fully custom button.

THUY: Got it.

JASON: Because I actually have mute and -- like a mute toggle that I can put on my site and we can pull that in as custom media.

THUY: All right. So, in the docs. Just so everyone can follow along, there is a dedicated styling section. Let me pop this into Twitch. Twitch... enter.

JASON: Styling.

THUY: Yes. It has all of the CSS variables that are available to you. And which components you can use them on.

JASON: Oh, cool. Yeah. Because as we look at this, all right. So, I'm seeing like the media-controlled background is like this -- these dark boxes that are like semitransparent. Because as I move through, you can kind of see different --

THUY: Yeah, you can change the background color of the buttons, you can change the hover background, the height, the width, the padding. Color of the actual triangle of the play button. All the things. You could even customize the color of the part of the time range that has loaded already.

JASON: That's cool. Ranges so --

THUY: Yeah.

JASON: Hover background, hover, border. Transition, opacity, track. Wow. There's a lot. That's cool. And then buffered color. Yep. So, pretty easy to go pretty deep here. Let's open up -- I'll open up my site and I have some values in here that we can --

THUY: Yeah! Pick like a Jason Lengstorf Yellow.

JASON: all right. So, here's that. We have our colors here. If I go down to my CSS variables down at the bottom. Here are all of my variables. So, here's the yellow. Let me... I think it's this one. Let's just grab this one. And we'll come back in here and we will say it was root. And then I want to set media background. Media control background. Control background. And do I need to set that elsewhere?

THUY: So, try targeting -- so, what -- do you want all the controls to...

JASON: Yeah. That would mean I need to be inside of here?

THUY: Yeah. So, try targeting Media controller instead. And, yep. Oh, is this a refresh issue? Let's see...

JASON: Let's see. [Giggles] Choices were made.

THUY: It's so easy to look at.

JASON: Let's maybe pick a different one.

THUY: Maybe a, well...

JASON: The icon color, that's gonna be better, right?

THUY: Yeah. That probably will look better.

JASON: Let's go with icon color.

THUY: I think another refresh.

JASON: Okay.

THUY: Yeah.

JASON: That's a little less... whoof! Okay. But pretty immediately, you can kind of see this all coming together and if I look at some of my other colors here, like I've got this dark blow, I could set the media control. Control background. To that darker color. Save it. Refresh. And now --

THUY: OOO... whoa!

JASON: Kind of pulling in --

THUY: That looks nice.

JASON: And if we want to make that... do one of these. Make it a little more... a little more transparent here, right? So, just the eight-digit hex code. These are opacity for anybody who hasn't seen that before.

THUY: Yeah.

JASON: So, that is, you know, pretty immediately customized in a wayed that helpful to me.

THUY: Yeah. So, right now because we're scoping them to everything under media controller, everything that counts as an icon or anything that counts as a media control and background, they're changing. But if you only wanted to give a control that background color or icon color, you can target that. And change only it.

JASON: Okay. So, let's make the play button the pink color. Here we go.

THUY: I think... yes. This is making me think of summer. Like lemonade.

JASON: Exactly. Exactly. But so, with something like this, if I have like -- I've got my gray. Here's -- here's a gray alpha color that I can use. So, let me grab this one. Drop it in here. And let's see what happens. So, then these end up with a much more subtle alpha. I probably wouldn't use that because it actually disappears entirely.

THUY: Yeah.

JASON: But there's the customization, right? And that's pretty awesome. Can I do other things too? Like if I wanted to just border radius 52%, make it -- get rid of this so we can actually see the... here. Look at that. Circular buttons!

THUY: Yes. So, you don't have to use CSS variables in order to style it. It just gives you finer-tune control on exactly what it is that you're changing the CSS for.

JASON: Yeah. I mean, like this is great. Because it -- it shows how quickly we can do some basics. So, theming is really straightforward. You grab all those components, you swap them out for your themes and end up with something that looks the way you want it to look. You jump into a controller or button and make it bigger or smaller. That feels pretty approachable. And looks like there's a lot more notes in here as well where we can kind of see... yeah. Nascent, that's fine.

THUY: Yeah. It's -- what I really like about these docs is, it tells you what CSS variables there are. But it tells you what is the CS's property that's underneath? What is the default if you don't change it? It even gives you notes, hey, if you use this, it's actually going to affect all the whatever elements inside of Media Chrome. So, it's really helpful. A lot of extra context for you as a user.

JASON: Yeah. This is -- it's very clearly something that like -- what I like about it is that we started by copy-pasting something they could have shipped today. And I wouldn't have to touch anything, it would just work. Which is great. Because what I'm trying to do is get something valuable out to the people using my site, I can do that without having to worry too much. I just get to say, I want this button, this button, this button, and off we go.

THUY: Yep.

JASON: Now, if I'm wanting to -- then later, once I have proven this is a good thing and I want to do more with it, and I can customize this to make it more fit my brand. What if I want to do something really wild? I want to put a logo in the top?

THUY: Oh, yes. So, we can -- I don't know if you have a link or a file on hand. But --

JASON: I do.

THUY: But we can try...

JASON: Let's see. This one here. I want to inspect.

THUY: While Jason is looking at than we want to read what any teammate said, Dillon, he said the idea with Media Chrome is that building a media player should feel like an HTML form. Just using HTML elements and CSS.

JASON: Yes, that's pretty excellent.

THUY: That's how it feels.

JASON: I have copy and pasted a logo. If I drop this down here.

THUY: Yes, that -- is that outside the player?

JASON: It's outside of the player right now.

THUY: Okay. We have proved it's a thing and it works.

JASON: Yes, we have.

THUY: So, check. Big green check mark. So, we can -- wherever we want to put that, the top bar, could be the center -- probably the top bar. We can stick it into the div. And there it is. And from here, you've just -- we've taken care of it's gonna appear at the top. And if you want your logo to be somewhere other than right there, you can just little bit more CSS. And put it where you need to.

JASON: So, it would be something like this. And we'll do a position -- what if I do a position absolute? And go top... nope. Doesn't like to. So, does that mean I need to make this... position relative?

THUY: You could probably -- where do you want to put your logo? At the right? Okay.

JASON: So, I just needed to refresh the thing again. Actually, that makes me wonder if I even needed this. Let me save. Code sandbox is doing a little work to mess with me. Yeah, we didn't need that.

THUY: Yes, and since you're using position absolute, you probably didn't have to -- well, actually, no. Because you did -- well, you took away the relative. There are different ways to get on the right. You could use display flex on the div and done like justify content.

JASON: That's a good idea. Let's do that one instead. Yeah, let's take that out. And instead what we'll do is we will take our top Chrome. Give it a div. Top Chrome. And say, display flex. And do justify content. And then everybody's favorite Dave Matthews song, The Space Between.

THUY: I don't know this song. Do other people know this song?

JASON: You don't need know the song. It's definitely one of those like I'm showing my advanced age here. But that's not working probably because something needs to be... white people song. Shit.

THUY: I -- I didn't say it. Jason didn't say it.

JASON: You're not wrong. You're not wrong. [ Laughter ] So, okay. Yes. We have -- you know what? I don't want to mess with the CSS. I'm just gonna roll back. There we go. Stick here. And now we've got a semitransparent logo stuck up in the top right and we can do something like, you know, make it a little bit shorter. Make it a hundred pixels wide or something.

THUY: Yeah. The point is you can add a logo and put it wherever you want.

JASON: You can do whatever you want. And it is magical.

THUY: You could have two play buttons, which we do.

JASON: That doesn't work. Instead of debugging the messaging, we're going to let it be the size it is.

THUY: Jason's doing the thing --

JASON: Everybody is watching it and I make it happen.

THUY: Yes, changes the pixel. Plus five more pixels.

JASON: Okay. I'm done with that. We're not doing any more that have. I'm gonna get rid of our double play button.

THUY: Yeah.

JASON: And know we have like -- this is something that you could ship. We've got our play back controls, we've got volume. We've got a range. We've got some of these little buddies.

THUY: Yep.

JASON: You've got a watermark in here. And like as we play... that's cool.

THUY: yes. Other -- as you're playing that, I'm remembering other useful things that you can do to customize. You can customize the auto-hide situation. I believe right now there is a default auto-hide. So, when you click the play button, yeah, it starts. You move your mouse a little bit off of it. After X many seconds, it will auto-hide the control. You can totally disable the auto-hide, or customize the auto-hide to the number of seconds that you want.

JASON: Nice. And you do that on a per section? I want this to always stay and that to auto-hide after a few seconds, does that work?

THUY: Personally, I have only tried it on the media controller. So, I mean, we could just -- why don't we just try it. First, let's do it on the media controller. Let's do auto-hide equals a number of seconds.

JASON: Let's do 5. Okay. Re-loading. 5. No. Nope, I didn't do it. Reloading.

THUY: Try not to leave the player. Try going -- yeah. Let's count. Yeah.

JASON: Okay.

THUY: That felt like an extremely long 5 seconds.

JASON: That was an extremely long 5 seconds. But it did work. So, if I'm here -- I guess when I pause, it's going to stay on. But that is very cool. So, then... that makes sense. So, then if I want to do auto-hide on -- well, actually, can you -- if I do like auto-hide off, or like that? Keep it on whatever?

THUY: It's not off. The number that our wonderful open source team chose was negative 1 if you don't want to auto-hide at all.

JASON: Got it. Okay. So, we're gonna save. We're gonna refresh. We're gonna hit play. And now it does not auto-hide. Okay. So, I want to see if I can do that just for this top Chrome.

THUY: Yeah.

JASON: Let's try it. Let's see what happens.

THUY: And if it doesn't work, we'll just take that as feedback from a potential user.

JASON: Okay. So, that doesn't work.

THUY: Yeah, based on where auto-hide is in the docs, it's specifically located under media controller. I feel like it's for all controls.

JASON: I have -- I have a theory. They all hide no matter what, huh?

THUY: Yep.

JASON: Oh, so, the whole thing hides. Anything in here is gonna hide on top of the video. Got it. Got it. Okay.

THUY: Other things that you can style like, for example, you know how with Netflix, Netflix iconic like red? They have it so that the -- the circle that represents where you are in the time range is a color. And also, the amount of video that you've already watched is the same color. You can also style that. So, if you wanted to extend your Learn with Jason yellow to that like Netflix-style situation in the time range, you can do that.

JASON: That would be -- we've got media control background. Where did my range go?

THUY: So...

JASON: Range and height.

THUY: Yes. Thumb is the circle. So, you can do... I'll just --

JASON: Track background. Feels right. So, let's grab this one. And do here. Was that the right thing? That was not the right thing.

THUY: Refresh... let me...

JASON: Media range track, transition, translate. Buffered color.

THUY: Are you looking -- are you trying to style the circle? The circle?

JASON: That was -- yeah. The them... the thumb color.

THUY: We should be able to do media range thumb background for the circle.

JASON: And there it is.

THUY: Okay.

JASON: And then if we want these to be the same, we could do that. But I'm actually more curious. There's a good question from Connor Marr about subtitles.

THUY: Captions.

JASON: Caption.

THUY: Yes.

JASON: How does one do such a thing here? We can do messy ones here. I can get something completely unrelated to the video and we can throw them into the video and turn them on and off.

THUY: Probably. But let's... let's see. Captions. So, I know that there's a captions button. Number one. We could start by trying to add that. Which is media captions button. And then... so many win dose. I'll grab an example file for you. That would be splendid. So, I know that you can do things like you can add tracks. Like if you wanted a preview thumbnail image, you could add a track. I would imagine -- I haven't played with this myself. But I know that captions are generally possible in the things that we build. I would guess that you can add a track.

JASON: I have a suspicion that this example is going to include actual captions.

THUY: Yes.

JASON: Maybe. Track thumbnails, metadata.

THUY: Add this nested inside the element? Did you paste something? Let me see. Okay. Yes. If we go to the Twitch chat, Dillon, he added, copy the track tag.

JASON: Got it.

THUY: That's in the chat. And then we can stick it... under the -- yeah.

JASON: There is a track.

THUY: Yep.

JASON: Captions are on.

THUY: Captions are on. Let's see...

JASON: Do we need to?

THUY: Refresh. Yeah. So, that is -- that look correct. The V TT file.

JASON: Maybe I just need to reload.

THUY: Yes.

JASON: Turn this on, play.

THUY: Always hard refresh.

JASON: Am I missing, because I've got the captions button, but do I need to put captions -- like is there an element for the captions on... captions button...

THUY: The track looks correct to me.

JASON: Yeah, the track looks correct.

THUY: Kind, subtitles, English. I know tracks work in general because I've seen it work with the thumbnail.

JASON: Oh, maybe I turned it off when I did this.

THUY: Ooo... that would be controversial.

JASON: Hm... that doesn't seem to be doing the thing.

THUY: Why don't -- let's just first verify that tracks work period. So, why don't we... why don't we try to add a thumbnail.

JASON: Okay.

THUY: Do something like this. I'll put it in the Twitch chat.

JASON: Okay. Wait, that's more -- that's another...

THUY: Yeah. This is another track meant for thumbnails.

JASON: Oh, okay. thumbnails.

THUY: Maybe the video is too short for the first track.

JASON: Good question. Unsafe attempt to load.

THUY: From frame --

JASON: Oh, it's -- that work -- will it work out here?

THUY: This is one of the things that was frustrating about Code Sandbox. That we had to be out here to look at stuff, certain things.

JASON: Yeah. It looks like it's fighting us on -- it's fighting us on third-party URLs. Which is -- that's okay. We can... it would work like this. Is the -- is the answer.

THUY: Yes.

JASON: And then if we weren't using Code Sandbox, which we don't have time to change, then you could do that.

THUY: Yes.

JASON: These don't work due to --

THUY: Yes, yes. And we are looking at Mad Max. And it's buttery. If you try a Media Chrome implementation yourself using the docs, if you copy that, it's so buttery, if you play it. The frames.

JASON: Yeah. It's definitely like high-quality video.

THUY: Yes. With the remaining time that we have, I think we could move off of this -- well, I guess like -- I was gonna say temporarily, but basically indefinitely in the livestream. But I do want to show that -- because right now this video is a Mux video. I really want to show that you can in fact use it with something that is not Mux.

JASON: Yeah. Isn't there an open video thing that you can just get an MP4.

THUY: So, in I believe it is under the Get Started section of the docs. If you scroll to the bottom. There is a list of other types of videos that you could support. So, for example, there's different streaming technology out there. And some of them are proprietary, right? And they're like if you host with us, we want you to use our player. So, to make it so that a Media Chrome media player works with things that would otherwise be proprietary, our team has made web components. So, for example, YouTube, Vimeo, web components that essentially have an iFrame of a proprietary player underneath so that you can in fact use Media Chrome to build the UI of your dreams. But have the video be hosted on YouTube or Vimeo.

JASON: Okay. So, I'm very curious about how this is gonna work. So, I'm going to grab... here is my -- the YouTube video element. And then I need to grab this bit. And so, is this -- this bit here should --

THUY: Hold on, did you just Google this YouTube player? Or is this from the docs?

JASON: I found it in your docs.

THUY: Okay. So, if we click the YouTube video --

JASON: Am I in the wrong place?

THUY: Well, if you clicked it from the docs, I would hope not. The YouTube element looks -- first like we're gonna need a script.

JASON: Yeah. Got that and it is loading.

THUY: Okay. Beautiful. So, we -- and you just pasted --

JASON: Pasted the whole example here.

THUY: Yep. YouTube video. Yep. Slot. Hold on. Let me look at your screen in-depth here.

JASON: So, I'm outside of the media controller entirely at this point. I have embedded two of them.

THUY: Let's -- let's comment out the Mad Max video source.

JASON: This part here?

THUY: No, the -- if grow up to the video tag that we were using as the original media source, let's just comment that out.

JASON: Okay.

THUY: Oh, that -- it's battle of the comments right now. Or just delete it because we don't really need it although this point.

JASON: Can I put my YouTube video like inside here to get the --

THUY: Yeah. So, now we are -- we're gonna use slots to say this is the media source that we're gonna use instead. So, with the YouTube player, we can slot equals media on it.

JASON: This is not a function.

THUY: Ah, yes. Try -- let me paste some more for you. Where is the chat? Yeah, try refresh first.

JASON: Okay. It's -- it looks like they're competing with each other.

THUY: Take out -- try taking out the controls. Because it says controls. We shouldn't have those there. Okay. Okay. I've seen this before. Refresh. Yep. Slot equals media, YouTube video. That's interesting. I -- could it be -- so, you see at the top there, there's a comment. Normally with the comments, they're gray. But I just hope that's not doing anything. Try... Y-o... that is exactly what I have. YouTube video, slot equals media, source is that. YouTube video. And you said we have the script tag in here for... the YouTube element?

JASON: Yes. Got them both in here. Let me just do a full refresh. Let me see if that changes thing. It does not like something about this.

THUY: If you go to the actual URL at the top of the preview, is it different?

JASON: No.

THUY: Page -- let's inspect... let's inspect.

JASON: So, it's given us... media controller. YouTube video. And then this looks like the full embed. So, something... it's like not picking it up somehow.

THUY: Interesting. And the iFrame is underlined. Is it saying that something is wrong with the iFrame? It's not --

JASON: IFrame allow is not supported by -- Android. But that's... I think that's only in Firefox for Android?

THUY: I'm just curious...

JASON: More like something's gonna get weird here. But it does -- so, I'm wondering -- is it supposed to... is there like a customized...

THUY: Really all you should need is this script to use the element. And the element itself with the source. I'm curious if it looks broken like this if you open it in Chrome. I'm just curious.

JASON: So, I'm in Edge, not Firefox. That's why I think that was just a warning like, hey, this might break in the future. But I can open Chrome. But I don't have Chrome installed on this machine. [ Laughter ] But!

THUY: Ah, live demo things.

JASON: But looking at these docs, I think I'm trying to hold this wrong. I don't think this one is -- element API matches the HTML5 video tags so it can easily be swapped with other video. But I think it's like for the HTML5 element. And then it's not doing the other -- it's not doing the other things that we were talking about. So, that makes me think that we were doing something wrong.

THUY: I'm really curious, if you go back to your code sandbox, I think after the end of the script tag, at the end it says whatever -- what if we just -- yeah, what if we removed that and refresh. Would it take issue? Oh...

JASON: Yeah, it doesn't like... so, I feel like it is unhappy with -- oh, no. On this... I lost our original video. Let's skip back up here this was the one. Let's get back in here. And if we put this back in, then we've got working video. So, I think I'm holding the YouTube video wrong. I don't know that it's -- the docs imply that it's not intended to be nested inside of a media controller. I might be wrong.

THUY: Maybe YouTube hates us today. Why don't we try Vimeo? We're getting stubborn here.

JASON: Sure. Let's try one more time. Here's Vimeo. And if one doesn't work, we are gonna have to end here. But let's grab these two bits. We'll go in here. We will get rid of this YouTube. And I'm gonna grab this Vimeo video.

THUY: Yep.

JASON: I'm going to... not in here. And refresh...

THUY: Let's get rid of the controls on it and put slot equals media on this guy.

JASON: Okay. Refreshing. And same -- same general problem. So, not 100% sure what's going on there. But that is maybe a -- a package script to the head. Sure. I can do that. And then we'll get this back in. And get my clipboard. One of these.

THUY: Although it didn't work alive, because we have two minutes left. It's probably not going to work out. If you go into the docs, under the compatible player section, there are rendered examples you can click. Yeah, we were trying to implement it and it didn't work out in the live demo. But if you click it in the docs, you can see how we have been able to implement a YouTube or Vimeo or Wistia-hosted video as-is.

JASON: And so, yeah. So, these look like they work great standalone, but I don't think they're -- they're not happy when they're nested inside of a media controller. I think we might be trying to do the same job twice. That's my current suspicion. Just since they are -- like this is rendering a full media controller is what I'm seeing in the demo.

THUY: Yes. So, my teammates say your markup is right. I feel the same. I feel like the markup is right. We added the slot. Can you move the unpackaged scripts to, question mark? We did remove controls. Wrong docs. There's examples in the Media Chrome docs. Yeah.

JASON: Yeah. Here is goes. This is -- do we need to add this plays in line?

THUY: I -- it's so interesting... let's see. If I...

JASON: Yeah, I don't know. Well, unfortunately, that is all the time we have. So, let me --

THUY: Darn.

JASON: One more quick shoutout to the captioning, we have had Amanda with us from White Coat Captioning all day today. Thank you very much. Made possible by our sponsors, Netlify, Nx and New Relic. And we have been hanging out with Thuy today. Give Thuy a follow on the Internet. We are playing with Media Chrome. Here is the GitHub account for that. I'm gonna drop, I will revert this -- I can't revert it. I'll fix this and revert it so we can share it. But if anybody wants to go and look at this, that is Code sandbox, we'll get it updated. And looking at things on the Internet, make sure to check out the schedule. We've got a lot of good stuff coming up. This one on Thursday is going to be super-fun, played with shared element transition API, which I have been very, very excited about. And a lot of good things coming up. So, check that out. Thuy, any parting words for the chat?

THUY: Yeah, I hope you try Media Chrome out if you haven't yet to build your own custom media player. And if you have, let us know how you like it. If you crave to talk to the video community, Mux HQ on Twitter, or if you are a Slack/discord type of person, we have a Slack channel for video engineers. Video.div.slack.com. If you ever have any questions about video engineering stuff, you can totally ask people in there. There's even a sub-Slack channel for questions specifically related to Mux. So, come join us.

JASON: Excellent. All right, y'all. We are gonna call this one a mostly success. We got some really cool stuff going with custom video and we will follow line up with some Tweets about how to do it with the other players. Thank you all very much for hanging out. We'll go find somebody to raid and we'll see you next time.