Johnty
Johnty

Reputation: 264

How does Discord embed YouTube-Playable Videos?

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

Answers (2)

Johnty
Johnty

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

Spectric
Spectric

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

Related Questions