YouTube iframe 관련 영상 제거 대체 방법

문제사항

WiniLogis Ocean Freight 상세 페이지에서는 iframe을 통해 YouTube 영상을 재생하고 있었습니다.

운영 중 아래와 같은 QA를 받게 되었습니다.

"저 동영상 더 보기는 못 숨기려나?, 서비스랑 상관도 없는 영상들인데"

영상을 정지했을 때나 플레이어 하단의 동영상 더보기 영역을 클릭했을 때, 서비스와 전혀 관련 없는 추천 영상이 노출되고 있었습니다.

이전에도 비슷한 문제를 겪은 적이 있었는데, 당시에는 추천 영상 영역 위를 하드코딩된 가림막으로 덮는 방식으로 처리했던 기억이 있었습니다.

하지만 반응형 환경에서는 플레이어 크기가 계속 변경되기 때문에, 단순히 영역을 덮는 방식은 유지보수 측면에서도 좋은 방법이라고 느껴지지 않았습니다.

그래서 다른 해결 방법이 없을까 찾아보다가 rel=0 옵션을 알게 되었습니다.

추천 영상 영역 자체를 가리는 방식 대신, "관련 영상만 노출되도록 제한할 수는 없을까?"라는 방향으로 접근하게 되었습니다.

이후 검색을 하다가 YouTube 공식 문서를 확인해보았습니다.

문서를 확인해 보니 rel=0 옵션이 아래와 같이 정의되어 있었습니다.

즉, 더 이상 추천 영상 자체를 제거할 수는 없지만, rel=0 옵션을 사용하면 현재 영상과 동일한 채널의 영상만 노출되도록 제한할 수 있었습니다.

해결 코드

html

1<iframe src="https://www.youtube.com/embed/9WFnxyopdhc?autoplay=1&rel=0" />

결과적으로 WiniLogis 채널의 영상만 추천 영역에 노출되도록 처리하여, 서비스와 무관한 영상이 노출되는 문제를 개선할 수 있었습니다.