문제사항
WiniLogis Ocean Freight 상세 페이지에서는 iframe을 통해 YouTube 영상을 재생하고 있었습니다.
운영 중 아래와 같은 QA를 받게 되었습니다.
"저 동영상 더 보기는 못 숨기려나?, 서비스랑 상관도 없는 영상들인데"
영상을 정지했을 때나 플레이어 하단의 동영상 더보기 영역을 클릭했을 때, 서비스와 전혀 관련 없는 추천 영상이 노출되고 있었습니다.
이전에도 비슷한 문제를 겪은 적이 있었는데, 당시에는 추천 영상 영역 위를 하드코딩된 가림막으로 덮는 방식으로 처리했던 기억이 있었습니다.
하지만 반응형 환경에서는 플레이어 크기가 계속 변경되기 때문에, 단순히 영역을 덮는 방식은 유지보수 측면에서도 좋은 방법이라고 느껴지지 않았습니다.
그래서 다른 해결 방법이 없을까 찾아보다가 rel=0 옵션을 알게 되었습니다.
해결 방법
추천 영상 영역 자체를 가리는 방식 대신, "관련 영상만 노출되도록 제한할 수는 없을까?"라는 방향으로 접근하게 되었습니다.
이후 검색을 하다가 YouTube 공식 문서를 확인해보았습니다.
https://developers.google.com/youtube/player_parameters
YouTube Embedded Players and Player Parameters | YouTube IFrame Player API | Google for Developers
YouTube Embedded Players and Player Parameters 컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요. 개요 이 문서에서는 애플리케이션에 YouTube 플레이어를 삽입하는 방법을
developers.google.com
문서를 확인해 보니 rel=0 옵션이 아래와 같이 정의되어 있었습니다.
즉, 더 이상 추천 영상 자체를 제거할 수는 없지만, rel=0 옵션을 사용하면 현재 영상과 동일한 채널의 영상만 노출되도록 제한할 수 있었습니다.
해결 코드
<iframe src="https://www.youtube.com/embed/9WFnxyopdhc?autoplay=1&rel=0" />
결과적으로 WiniLogis 채널의 영상만 추천 영역에 노출되도록 처리하여, 서비스와 무관한 영상이 노출되는 문제를 개선할 수 있었습니다.
Before / After
'지식 정리 📝' 카테고리의 다른 글
| React Lazy + Suspense 사용 시 페이지 전환 깜빡임(흰 화면) 문제 해결 (0) | 2026.03.23 |
|---|---|
| Android WebView 디버깅: chrome://inspect Pending authentication 오류 해결 (0) | 2026.03.12 |
| Frontend Kit – AI 문답 기능 도입 (Gemma 3 27B) (2) | 2026.02.27 |
| WiniLogis Webpack에서 Vite로 마이그레이션 (2) | 2026.02.10 |
| Keycloakify를 활용한 React 기반 Keycloak 테마 개발 및 다국어 처리 (2) | 2026.02.09 |