유튜브 영상 삽입 뒤 웹페이지 로딩 속도 느려짐 해결
연휴는 다들 잘 보내셨나요? 누런돼지입니다.
오늘은 다들 아시는 간단한 팁 하나를 공유할까 합니다.
유튜브 영상, 웹페이지에 iframe으로 많이들 넣으시죠?
다들 아셨겠지만, 저는 간단할 줄 알았던 이것 때문에 속 깨나 끓였습니다 ㅠㅠ
그럼 천천히 설명드리죠.
저희는 창간 70주년 기념으로 <혐오를 넘어>라는 기획을 진행했습니다.
관련 페이지도 저희 팀에서 제작했고요^^ 시간 나면 한 번들 들러봐주세요~
아무래도 그 중의 백미는 인터뷰라고 할 수 있습니다. 보시면 아시겠지만 뭉클합니다 ㅠ
글로 전할 수도 있지만 동영상이 역시 힘이 강하다고 생각해서 페이지에 삽입했습니다.
http://nohate.khan.co.kr/video.html
바로 이렇게 말이죠~
물론 뭐 예쁘지는 않습니다만 ㅠㅠ 한 분 한 분의 인터뷰 중에서 주요한 말을 뽑아서 보여주고 동영상을 삽입해 전체 영상을 볼 수 있도록 정상을 다해 페이지를 만들었습니다.
그런데 문제는...
여섯 개의 유튜브 영상을 iframe으로 삽입했는데, 로딩 시간이 어마어마하게 긴 겁니다.
스크롤을 내릴 때마다 차례로 말과 이미지가 뜨도록 설계했는데, 아예 로딩이 되지 않은 상태에서 스크롤을 내리니까 페이지가 공백인 상태로 한참 동안 뜨더라고요 ㅠㅠㅠ
유튜브가 이렇게 로딩이 길 줄은 상상하지 못했습니다.
로딩이 너무 안 되길래, 일단은 $(window).load() 를 써서 전체페이지가 로딩된 뒤에 페이지가 뜨도록 설정했습니다. 그 전에는 로딩이미지를 띄워줘서 유저들이 로딩이 되고 있구나 하고 기다릴 수 있도록 하고요.
PC에서는 이 방법이 어느 정도 괜찮았습니다.
하지만 모바일에서는 그래도 화면이 뜨지 않았습니다. 인터넷 속도가 더 느린 탓이겠지요. 한참 뒤에야 화면이 로딩되는데, 이렇게 해서야 유저들이 금방 나가겠구나 하는 생각이 들었죠 ㅠㅠㅠ
그냥 스크롤을 내리면 차례로 뜨는 기능을 포기할까 하는 생각도 들었습니다.
그런데 그걸 들어내는 게 더 귀찮더라고요 ㅎㅎ
그래서 계속 찾아봤습니다.
그랬더니, 짜잔... 유튜브 URL에 매개변수를 삽입해 로딩을 조절할 수 기능이 있는 겁니다.
물론 자동으로 재생되게 하는 autoplay나 특정 시간 이후부터 재생하는 start 같은 매개변수들은 이전에도 아래 사이트에서 사용해 봤습니다. 하지만 로딩까지 조절할 수 있는 줄은 몰랐어요.
http://news.khan.co.kr/kh_storytelling/2016/government/
바로 controls 이란 매개변수!!
이걸 2로 지정해 주면, 사용자가 클릭하기 전까진 로딩이 되지 않고 껍데기(?)만 뜨기 때문에 로딩 시간이 대폭 단축된다고 합니다~
다른 매개 변수들은 아래 사이트에 들어가시면 자세히 보실 수 있습니다.
https://developers.google.com/youtube/player_parameters?hl=ko
이것 외에도 좀 더 깔끔한 사이트를 위해 유튜브 영상 위에 표시되는 제목(아래 사진의 빨간색 박스 부분)을 없애고, 컨트롤 바에서 유튜브 로고도 없애는 옵션을 썼습니다. 한결 나아보이시나요? 뭐, 그냥 안 해도 상관없습니다만 ㅎ
결과적으로 쓴 코드는 다음과 같습니다.
<iframe src="https://www.youtube.com/embed/4yaywhkUedE?controls=2&showinfo=0&modestbranding=1" frameborder="0" allowfullscreen></iframe>
위 URL 매개변수 중에서 controls=2가 바로 클릭 뒤 로딩하라는 옵션입니다. 이어 showinfo=0 이 바로 제목을 없애는 옵션이고, modestbranding=1이 유튜브 로고를 없애는 옵션입니다.
유튜브에서 소스코드 복사를 하신 뒤 URL 뒤에다가 자유롭게 추가하시면 됩니다.
매개변수 목록을 보시고 하나씩 시험해 보셔도 재밌으실 겁니다.
아주 간단한 해결 방법을 모르고 이틀간 머리를 싸맸습니다.
저처럼 고생하신 분들이 계실 것 같아, 정말 간단하고 다들 아시는 팁이겠지만, 한 번 공유 차원에서 남겨 봅니다.
혹시 도움이 되셨다면 저희 사이트에 한 번쯤 들러서 구경해 주세요~
저희에게는 큰 힘이 됩니다 ㅠ
그럼 다음에 또 찾아뵙겠습니다.
