Transcript
Hello. Recently at work, I was given the task, allow users to embed YouTube and Vimeo videos into the application. Now, uh, when thinking of embeds, I think of this feature, go to share, embed, copy the embed html into your applications, H TM L and agenda, this kind of embedded, uh, video. Uh, VMware has the same, you go to share and embed and has the embed code that you can put into your H TM L, but I don't want to allow users to paste any random iframes into my application. I want them to just be able to paste, uh, uh, UL to Vimeo and, uh, YouTube. And, uh, based on this, I'm going to resolve the iframe for, uh, their URL. I don't want to work on sanitizing iframes, I just want to get the As input, the URL. And I want to, to display the embedded, uh, iframe. But, uh, what is the right way to resolve the iframes, uh, for different providers? Uh, well, I found this format called umba. It was created by, uh, Cal Henderson, the co-founder and CT o of, uh, slack. And, uh, the idea is that, uh, uh, a media provider that allows embeds would have, uh, an API endpoint, like Flickr services. O embed, for example, uh, would allow you to input the full UL to uh, uh, media asset, like a video. And it'll give, uh, JSN response with, uh, different data about this video. It can be just, uh, an image. It can be, uh, in embed html for a video. Uh, so, um, both YouTube and Vimeo, uh, use o embed. Uh, if you go to the inspector and search for om embed in, uh, YouTube, you get this, uh, uh, link with type application, JSON plus OM embed, and here's the URL. And here you see the OM embed API endpoint for YouTube. And in then we have the URL, that is the UL of the video that you were just looking at and see, we have this full response. There's, uh, the author name, there's the, uh, title of, uh, the video. There's, uh, even the thermal URL. Let's go with the thermal URL here, here it is. And then there's this embed h, TM L for the YouTube video. And, um, here, for example, in Slack, I just put in the YouTube video, URL. And, uh, we get this, uh, title. We get the, uh, thumbnail. Let's refresh. Here's a thumbnail. I click, and you see it plays, uh, the embedded I frame. So I think, uh, uh, slack is using O embeds for this. Uh, also going to Vimeo. If I go to the inspector and search for o embed, again, I have this link for the Vimeo API endpoint. You said the data, data is, uh, slightly different, but o embed, uh, documentation specifies what, uh, uh, data keys, uh, it, uh, wants to accept. And again, here I have this H TM L that gives me the iframe to embed this, uh, uh, video from YouTube or from vmo. So, uh, I have different API endpoints for VMO and for YouTube. And I want to have one input field to resolve all of them and display the embedded iframe. Uh, here's more or less what I built. So it's kind of already abstracted from the Rails application into a one page application. I have this input field for A URL. I'm going to go with this URL. And here you see, I, uh, uh, determine that it is a YouTube video. I make the request to the YouTube embed the API endpoint. I get the payload. I pass the payload. I see the, uh, uh, thumbnail, URLI display the thumbnail here. I, uh, have the embeddable H TM LI frame. I embed it here. And you see I can play this video if I, um, change anything here, like change the title. You see, there's no valid video at this. Uh, uh, URL, so nothing is displayed. It also works for Vimeo. So I'm going to paste the, the UL to M video here. And you see I'm got this response. There are more data points here from the Vimeo video. I have also the thumbnail. And again, I have the embeddable H, TM L player. And here's the embed code. So using just JavaScript, no Ruby, no rails, I make this a p requests. Let's have a look at the source code. So, uh, again, I just have an index, HTML page and the, uh, JavaScript file that could be easily converted into a stimulus controller. And whenever the user inputs A URL, first of all, I check whether it is a VMware UL or YouTube or anything else. I have this, uh, code here. So I check whether it's YouTube or VMO or something else. And based on this, I'm going to make an API call to the, uh, endpoint. So you see YouTube, vmo, and in this case also have Vista, have different, uh, API endpoints. I make the request, get the data. So this kind of data in JSON format, I pass it and I pass this video, uh, data to display it in the, uh, rich format. So like this, when a user, uh, inputs A URL, he can in real time see whether he has a valid URL or if he has the right video, URL, and you can see the player. And, uh, I think it's a good approach for, uh, displaying data that, uh, you would like, Uh, users to kind of embed into the application. So if, uh, you would like users to allow to embed an iframe from, uh, YouTube or Vimeo or another application allows, uh, kind of rich media like, uh, I know podcast, uh, providers, you could see if they have, uh, support for o embed. You could make, uh, request to their o embed endpoint and get their, uh, HTML for the embeds dynamically. The source code of, uh, this video, uh, is available here I extracted into, uh, single page application. There's this index H TM L, there's the JavaScript. I, uh, published it@oembedsuperl.com, and I published it with, uh, GitHub pages. So going to pages you see, uh, embed superl.com, and it works as a single page application.
0