oEmbed

1. oEmbed란?

블로그에 글을 작성해보거나 콘텐츠를 만들어본 분이라면 Youtube 또는 다른 미디어 콘텐츠를 게시글에 공유해본 경험이 있을 것입니다.
이렇게 어떤 미디어 콘텐츠를 다른 서비스에서 공유하고자 할 때는 해당 콘텐츠의 링크를 붙여넣거나 <iframe>태그의 소스를 붙여 넣어야합니다.
하지만 대부분의 커뮤니티에서는 보안상 태그의 사용을 허용하지 않습니다. 때문에 링크를 붙여넣는 방법밖에 없습니다.

oEmbed는 이를 보완하기 위해 만들어진 포맷입니다. 이는 다른 사이트에서 URL을 통해 내장된 콘텐츠를 보여주는 간단한 API입니다. 공식적인 포맷은 아니지만 Youtube, Facebook 등 영향력 있는 서비스들이 참여하면서 대중화가 되고 있습니다.

2. oEmbed 데이터

간단히 oEmbed 사용의 예를 보여드리려고합니다.
사용자는 oEmbed를 이용하고자하는 서비스에 아래의 Youtube url을 입력합니다.

https://www.youtube.com/watch?v=OWrolGt94z8&feature=youtu.be

Consumer( oEmbed 데이터를 요청 )는 이 url을 받아서 아래와 같은 HTTP Request를 생성합니다.

https://www.youtube.com/oembed?url=http%3A//www.youtube.com/watch?v=OWrolGt94z8&format=json

Request를 받은 Provider( oEmbed 응답 )는 oEmbed response를 돌려줍니다.

{
  "author_name":"Shoot for Love \uc29b\ud3ec\ub7ec\ube0c",
  "provider_name":"YouTube",
  "width":480,
  "author_url":"https:\/\/www.youtube.com\/user\/shootforloveworld",
  "height":270,
  "title":"\uc548\uc815\ud658 45m \ud55c\uac15\ud6a1\ub2e8\uc29b. \uacf5 \uada4\uc801 \ubcf4\uc18c \u3137\u3137\u3137",
  "type":"video",
  "version":"1.0",
  "thumbnail_width":480,
  "provider_url":"https:\/\/www.youtube.com\/",
  "thumbnail_height":360,
  "html":"\u003ciframe width=\"480\" height=\"270\" src=\"https:\/\/www.youtube.com\/embed\/OWrolGt94z8?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen\u003e\u003c\/iframe\u003e","thumbnail_url":"https:\/\/i.ytimg.com\/vi\/OWrolGt94z8\/hqdefault.jpg"
}

3. oEmbed 프로젝트

이번에 oEmbed의 API를 사용해보고싶어 간단한 프로젝트를 진행해보았습니다.
oEmbed를 지원하는 다양한 서비스들의 콘텐츠 URL을 넣으면 해당 미디어 콘텐츠를 볼 수 있고 oEmbed 데이터를 수집하여 보여주는 서비스입니다. Ruby on Rails를 이용하여 간단히 구현해보았습니다. 데이터를 저장할 필요가 없기에 DB는 만들지 않고 진행하였습니다.

oEmbed에서 Provider들의 데이터를 Json형식으로 제공합니다. Provider 별로 endpoint가 다르기때문에 이를 이용해야합니다.

4. 과정

사용자가 서비스에 URL을 입력합니다.

사용자가 입력한 URL에서 providers.json의 데이터와 비교할 도메인을 추출합니다.

추출한 도메인을 이용해 providers.json의 “provider_url” 데이터와 비교합니다.
비교하여 해당 도메인이 존재한다면 도메인이 제공하는 “url” 데이터를 받아옵니다.

가져온 url을 이용해 providers에게 보낼 endpoint를 만들어줍니다. 일반적으로 endpoint는 도메인/oembed 형식으로 합니다.
이후 URL과 format을 파라미터로 받습니다.
따라서 위에서 입력한 url의 endpoint는 아래와 같이 됩니다.
https://www.youtube.com/oembed?url=https://www.youtube.com/watch?v=OWrolGt94z8&feature=youtu.be&format=json

이제 이전과 같이 해당 url의 json 데이터를 가져와 자신의 페이지에 예쁘게 뿌려주면 됩니다.
미리보기는 해당 url의 “html” 부분이며 이를 String이 아닌 html 코드로 인식하도록 해주면 됩니다.