웹사이트에 유튜브 영상의 오디오만 삽입하는 방법

유튜브 영상을 웹사이트에 삽입하는 일은 매우 간단합니다. 유튜브는 모든 영상에 공유용 임베드 코드를 제공하며, 이 코드를 복사해 사이트에 붙여넣기만 하면 됩니다. 그렇다면 영상 전체가 아니라 오디오(소리) 부분만 삽입하고 싶을 때는 어떻게 해야 할까요? 다행히 몇 가지 간단한 설정만으로 유튜브 영상의 소리만 재생되는 플레이어를 만들 수 있습니다. 지금부터 그 방법을 단계별로 살펴보겠습니다.

유튜브 영상의 오디오만 웹사이트에 삽입하기

1단계: 원하는 유튜브 영상 찾기

유튜브에 접속한 뒤, 웹사이트에 추가하고 싶은 영상(또는 음원)을 검색해 해당 영상 페이지로 이동합니다.

2단계: 영상 ID 확인하기

영상 페이지의 브라우저 주소창에서 URL을 확인하고, 그중 v= 뒤에 오는 문자열이 바로 영상 ID입니다.

예를 들어 영상 주소가 https://www.youtube.com/watch?v=Obx3e7MfEaI라면, 영상 ID는 Obx3e7MfEaI입니다.

3단계: 코드에 영상 ID 넣기

아래 코드에서 VIDEO-ID 부분을 앞서 확인한 영상 ID로 교체한 뒤, 웹페이지의 원하는 위치에 붙여넣습니다.

<div style="max-width: 400px; height: 110px; overflow: hidden;">
  <iframe style="margin-top: -190px;"
    width="400" height="300"
    src="https://www.youtube.com/embed/VIDEO-ID?rel=0"
    frameborder="0"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
    allowfullscreen>
  </iframe>
</div>

이 방식은 외부 컨테이너의 높이를 줄이고 아이프레임을 위로 당겨 영상 화면 부분을 잘라낸 뒤, 하단의 재생 컨트롤바만 남겨두는 기법입니다. 그 결과 화면에는 음악 플레이어처럼 보이는 작은 컨트롤바만 표시되고, 소리만 재생됩니다.

활용 시 알아두면 좋은 점

• 저작권 유의: 해당 영상이 본인의 콘텐츠이거나, 삽입을 허용한 채널의 영상인지 반드시 확인하세요. 저작권이 있는 음원을 무단으로 사용하면 문제가 될 수 있습니다.
• 모바일 대응: 컨테이너의 max-width 값을 조절하면 화면 크기에 맞춰 플레이어 폭이 자동으로 조정됩니다.
• 자동 재생: URL 뒤에 ?autoplay=1 파라미터를 추가하면 페이지 로딩 시 자동으로 재생되지만, 사용자 경험을 해칠 수 있으므로 신중하게 사용하는 것이 좋습니다.

이처럼 간단한 코드 수정만으로 유튜브 영상의 오디오만 깔끔하게 웹사이트에 삽입할 수 있습니다. 배경 음악, 팟캐스트, 인터뷰 음성 등 다양한 콘텐츠에 활용해 보세요.