YouTube Embed Component

[00:00:00]
>> Maximiliano Firtman: Well, let's do that YouTube and so we can actually see the working in this case. This is gonna be pretty simple in terms of the web component, so I don't think we need to create a template for it. We can create a template, so we need a web component, so I need.

[00:00:19]
Create a new web component. We can call this YouTube Embed.js, and we know the deal we're going to export the class YouTube Embed extends from HTML element, and we need to define it, so custom elements. Define, here we create the tag name and YouTube Embed. Remember I mentioned a couple of times that we can listen for attributes So when the attribute changes.

[00:01:02]
In this case, we are injecting a YouTube embed without the URL. Actually, I want the URL to appear here with the data property, okay, but initially we inject this into a DOM, the template, okay. Remember, we, Create a clone of the template and we inject it into the DOM.

[00:01:22]
Do we have any data inside? No. So do we have any data URL? No. So on connected callback. We don't have the URL. It's still an empty URL, so I don't need to render anything yet. I need to wait for someone to set that data URL. Does it make sense?

[00:01:40]
Do you understand why?
>> Speaker 2: It's just a placeholder.
>> Maximiliano Firtman: So, right now I put it here so we understand the idea I don't even need it, but what I'm saying is that talking about the movie details page, I'm injecting the whole movie details template here in this ,line, line 16.

[00:02:01]
Do we have the inside the HTML, the URL? Not yet. I could, like replace it before I can do something. Or I can use query selector and try to set the URL before actually in checking HTML. Dom, so you I can do that, and then we can use connected callback.

[00:02:20]
But I want to show you how to use the other solution. So what I'm saying is, I'm setting here the source, right? Well, I can also go and change, in this case, it was Data-url. We don't use Data-url here, okay? We use, if you're, Do you remember how to change that?

[00:02:43]
Dataset.url, and it's a trailer_url.
>> Maximiliano Firtman: So we are setting that attribute after it's injected in the DOM. Because of that, connected callback, will not get it. So for YouTube embed, we are going to change how we do that. In this case, what we are going to do is there, there are different ways to do that, but we are going to override.

[00:03:19]
One particular method is called attribute changed callback. Receives the property that is changing and the value attribute changed callback. I need to check if the property that has been Change is actually "data-url".
>> Maximiliano Firtman: Does it make sense? So if it's data-url, the property that is actually changing right now, I'm going to get that url from dataset.

[00:03:55]
I'm inside the Youtube embed, so I can now read the url Up and then, I mean, for now, we can just use console log to see if something happens. So in that case, when anyone in our YouTube embedded components changing data URL, you that function will be executed.

[00:04:14]
So if I refresh and inspect this, I'm seeing nothing Thing here, there is a quick answer on why did I import the component? No, remember, the browser doesn't know about that. So you need to think about that. We need to think about a solution, because you will have a lot of components.

[00:04:36]
Of course, there were, there are ways to, create a script that will check your file system for all the web components and will keep an import list automatically. But you need to find a way, sometimes you create one CSS file with all the components imports, so you need to remember every time you.

[00:04:58]
Actually create a new web component. You go and register that into your import tree. Okay, so have that in mind. So in our case, we can go again to maybe ABS is our entry point, and we can also import this one that is YouTube embed.js because if not, the browser is not actually registering the web component, it's not executing my class.

[00:05:27]
So I'm still not getting in because there are still one more step that you're not expecting, actually. So when you look at that, it should work. But actually, you need to specify to the custom elements enshrine in which properties you're actually interested in observing. It's not going to execute attribute change callback automatically for every change.

[00:05:59]
So you need to actually implement another one that is called Get observer attributes, and it's actually a static method. Do we have a static method in JavaScript? We do now, okay, and it's actually a getter. So it's a static property that has a getter. So I need to return Turn here an array of all the properties that I'm interested in.

[00:06:24]
So I'm saying I'm interested in only one property, data, URL. So then when that attribute is changing, you will get executed attribute change callback. So now that we are sending the URL to the console, let's. See if that's working. So I will come back here. Remember, we are talking about that web component.

[00:06:47]
If I refresh, I'm seeing the URL here at the bottom. So actually, now it's executing my web component. I still don't render anything on the screen, but we are getting the URL. So with that URL, we need to somehow see how to embed that in YouTube. So for example, if I'm going to youtube.com, to any video.

[00:07:10]
So from the video, we can click share, and then we can try to see the embed code. So we need to actually take that HTML, this HTML that we have here, so this is how you embed a video. So then we somehow need to do something with that.

[00:07:31]
So if you I had the URL, I need to change, for example, my inner HTML,
>> Maximiliano Firtman: With this. This is what I got from YouTube. Yeah, we can change a little bit here. The source here, at some point half the video ID, okay? So, we have to replace that video ID with the URL.

[00:08:03]
There are two ways to do that. So if you look at the current URL, the current URL look like this. So youtube.com forward slash watch and then a video. And here it's actually following a different pattern. So we don't have the watch and it's not the property that we are sending over query string.

[00:08:26]
So we actually need to do a little trick on this URL to get this part only and after we have that part, try to fill this with. Some kind of a video ID. Actually, we don't need actually the rest of the arguments. I think it will work without them.

[00:08:46]
But we don't need to take that URL and trying to get the video ID from it. That is just parsing the string. So we take that URL and we get the substring of that URL starting on the place where we see the maybe the question mark and the V and then we need to add maybe three characters.

[00:09:18]
Or two characters, if you're using the equals also. So I'm looking for that, and then three characters from there. Okay, so I'm getting a substring or equals. It has the same. We can add equals, which has the same if you want. So, and that's the video ID. So we are adding that there.

[00:09:39]
And the rest, we just keep it as it is with the HTML that actually Google is suggesting, okay? So we can embed that in our website.
>> Maximiliano Firtman: So if I refresh now, boom, I'm seeing that particular video and of course it will work.
>> Speaker 3: Valedogtoria.
>> Maximiliano Firtman: Of course, if I change the ID, remember we are still changing Ids manually, we will change that from a movie details page.

[00:10:16]
We are right now coding the ID, which is a pretty bad idea. And if we go back to,
>> Maximiliano Firtman: Right, say this and refresh, now I'm getting also the Men in Black trailer. So now we have created a Web component that can run their video Embed just by sending the video URL.

[00:10:42]
The problem that we have right now is that, yeah, we can render, by the way, we also, we may work with the size of this because it's getting out of the box at some point. So in that case, so you can see I'm talking about this. It's getting out of the.

[00:10:58]
Depends on the size, so we need to deal with CSS over the YouTube embed. So instead of with this, we can change this to 100 so it will fit in the box, 315 or 300 or whatever. So you can play with those values until you are happy. Okay, so then now it will fit properly.

[00:11:23]
Even if it's a mobile UI, it should work, something like this, okay? So now it goes to this other layout. You can play with that, that's HTML and CSS.