Reputation: 264
Recently I've been wondering how Discord has been able to embed a Youtube video,
In the link for ex: Example
The reason I'm wondering is because I am currently developing a website that would love to have this potential feature when posting links such as https://example.com/le-BoDs-Yt8 which then discord would output a similar style of embed like the YouTube one.
Any ideas on how this is done?
Upvotes: 2
Views: 29395
Reputation: 264
So thanks @Spectric this is most certainly the answer-ish except it's in a meta tag using OpenGraph, except one issue it doesn't allow you to play your own custom files example: .mp4's.
Example of OPG:
<meta property="og:url" content="https://www.youtube.com/watch?v=ur3-A7ovGUk">
<meta property="og:image" content="https://i.ytimg.com/vi/ur3-A7ovGUk/maxresdefault.jpg">
<meta property="og:video:type" content="text/html">
<meta property="og:video:url" content="https://www.youtube.com/embed/ur3-A7ovGUk">
<meta property="og:video:height" content="720">
<meta property="og:video:width" content="1280">
<meta property="og:type" content="video.other">
<iframe width="1004" height="753" src="https://www.youtube.com/embed/cIwTYL1fwJk" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
Upvotes: 2
Reputation: 31992
They most definitely retrieve the embed code (via right-clicking the video and select 'Copy embed code'), and add it to the message, along with the title + subtitle.
For example:
<iframe width="1004" height="753" src="https://www.youtube.com/embed/cIwTYL1fwJk" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe width="1004" height="753" src="https://www.youtube.com/embed/cIwTYL1fwJk" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
Upvotes: 1