별거 아닌 정보이지만 링크프리뷰 모듈을 만드는 입장에서 약간 쓸모 있는 정보를 알아내서 몇 자 남겨봅니다ㅎㅎ
유튜브는 다 좋은데 의외로 영상의 가로세로 비율을 '정확하게' 알아낼 방법이 없었습니다.
쇼츠 영상이야 애초부터 portrait 포맷이니 얼추 맞출 수 있는데, 롱폼 영상은 사용자들이 인코딩하는 것마다 중구난방이거든요.
16:9가 일반적이기는 하지만 누군가는 4:3으로 제작하기도 하고 또 누군가는 1:1이나 3:4 또는 9:16 비율로 제작하기도 합니다.
그동안 링크프리뷰 모듈은 oembed의 json 데이터를 가지고 width와 height 값으로 비율을 측정해왔는데, 가끔이긴 하지만 이마저도 아래의 주소처럼 잘 안 떨어질 때가 있습니다.
https://www.youtube.com/oembed?url=http%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DAOGhUcAdTKk
json 데이터로만 보면 16:9 비율일 것 같지만 아래에서처럼 실제 영상은 9:16 비율인 경우죠. (잠시 음악 듣고 가실까요ㅋ)
이런 거를 일반적인 16:9 비율 iframe으로 출력하게 되면 양 옆의 레터 박스가 그만큼 커질 수밖에 없습니다.
즉, json으로 제공되는 콘텐츠 정보나 공개된 썸네일 이미지 등을 믿고 iframe의 가로세로 비율을 정할 수는 없다는 겁니다.
그러다 오늘, 그동안 거의 알려지지 않았던 썸네일 url을 하나 발견했습니다.
일반적으로 유튜브 썸네일은 https://i.ytimg.com/vi/AOGhUcAdTKk/hqdefault.jpg 이나 https://i.ytimg.com/vi/AOGhUcAdTKk/maxresdefault.jpg 같은 url 포맷을 활용하는데요.
아시는 분은 다 아시는 것처럼 이건 어디까지나 '일괄적으로' 4:3이나 16:9 비율로 생성된 이미지이에요.
즉, 이런 걸 기준으로 iframe의 가로세로 비율을 특정할 수는 없었어요.
그런데 오늘 발견한 파일, frame0.jpg이란 녀석은 고무적이게도 영상 비율에 따라 생성된 썸네일 이미지였습니다 (나만 고무적?!)
클릭해서 보세요
https://i.ytimg.com/vi/AOGhUcAdTKk/frame0.jpg 이것은 세로 비율로 나오고,
https://i.ytimg.com/vi/e6mqQKKkJ0w/frame0.jpg 이것은 가로 비율이죠.
그리고 https://i.ytimg.com/vi/2Ut86Xv_AX0/frame0.jpg 이것은 가로 비율인데 정확하게 4:3으로 나옵니다.
즉, frame0.jpg 이미지를 로드해서 영상의 정확한 가로세로 비율을 구하는 것이 가능하다는 겁니다!
간단하죠?
https://i.ytimg.com/vi/{VIDEO_ID}/frame0.jpg
다만, 물론 이렇게 이미지를 로드해서 영상 정보를 가져오면 전체적인 파싱 속도가 느려질 것을 걱정하실 수도 있겠는데요.
유튜브 서버가 빠릿빠릿해서 생각보다 느리지도 않답니다ㅎㅎ
잘 읽고 갑니다!