24.08.01 유튜브 영상을 웹 페이지

웹 페이지에 영상플레이어를 넣으려면 video태그를 사용해야 하지만, 그렇게 하면 서버에 부담이 될 것이다.

따라서 우리는 유튜브영상을 iframe을 이용하여 가져와 보자!

원하는 영상의 공유버튼을 누르고, <>모양을 누른다. 그러면 위처럼 iframe태그가 나오는데, 이를 복사해서 html에 넣으면 유튜브 비디오플레이어가 나오게 된다.

 

하지만 나는 원하는 영화의 예고편을 가져와야한다. 그리고 위의 src중 embed/뒷부분의 내용을 tmdb에서 지원해준다.

따라서 저것만 넣어서 iframe을 만들고, 동적으로 붙여주는 작업만 하면 예고편 영상을 띄울 수 있는 것이다.

디테일 페이지의 parameter에서 id값을 가져와 해당 id값을 tmdb 영상 관련 api에 요청을 한다.

그러면 tmdb에서는 영화와 관련된 영상들을 모두 준다. 예고편 뿐만아니라 홍보용 영상까지 모두 준다는 뜻이다.

그 중 우리는 type이 trailer인 예고편 영상만 페이지에서 보여주면 되므로, filter을 이용하여 걸러주고, 아까 위에서 말한 src에 들어가야하는 key값을 빼내준뒤, src에 넣어주면 끝이다.

그리고 만들어진 것을 div에 넣어준 뒤 div태그를 원하는 곳의 자식요소로 넣어준다.

그러면 이렇게 유튜브영상이 웹페이지에 나오게 된다!

 

확실히 난 디자인엔 재능이 없다