split 메소드를 이용해 YouTube 링크를 Embed 형식으로 변환하기 (iframe) (문제 해결)

개요

페이지에서 props로 받은 각각의 데이터에 해당하는 유튜브를 iframe 태그를 이용해 삽입해야하는 상황이다. 하지만 어째서인지, 해당 페이지에서 오류 메세지가 나오는 것을 발견했다.

코드를 살펴보자.

interface IYoutubeDataProps {
  youtubeData: IYoutubeData;
}

function YoutubeData({ youtubeData }: IYoutubeDataProps): JSX.Element {
  console.log("youtubeData :", youtubeData);
  
  return (
    <>
      <div className={styles.youtubeDataContainer}>
        <Link
          target="_blank"
          to={youtubeData.url}
          key={youtubeData.ykey}
          className={styles.link}
        >
          <iframe
            title={youtubeData.title}
            src={youtubeData.url}
            allowFullScreen
            className={styles.youtubeData}
          />
          <div className={styles.youtubeTitle}>{youtubeData.title}</div>
        </Link>
      </div>
    </>
  );
}

문제 상황

부모 컴포넌트에서 youtubeData를 전달받아, 해당 데이터의 url에 해당하는 youtubeData.url을 iframe 태그의 src 속성에 넣으려고 시도하였다.

하지만,

"오류가 발생했습니다. 나중에 다시 시도해 주세요. 재생 ID는 ????입니다."

라는 에러 메세지가 나타났다.

웹 페이지나 웹 애플리케이션에서 YouTube 동영상을 임베드 형식으로 표시하려고 할 때, YouTube에서 제공하는 공유 링크를 그대로 사용하면 원하는 결과를 얻을 수 없다. 이러한 상황에서 동영상의 임베드 URL을 어떻게 얻을 수 있을까?

(임베드: SNS 등 인터넷에서 다른 사이트의 내용을 그대로 가져와서 보여주는 것)

원인

YouTube의 공유 링크는 "https://www.youtube.com/watch?v=VIDEO_ID&..."와 같은 형태를 가진다. 그러나 웹 페이지의 iframe에서 동영상을 임베드하기 위해서는 "https://www.youtube.com/embed/VIDEO_ID" 형식의 url이 필요하다. 따라서 공유 링크를 그대로 사용했기 때문에, iframe 내에서 동영상이 제대로 표시되지 않는 문제가 발생했었던 것이다.

해결 과정

주어진 YouTube 공유 링크에서 동영상의 ID를 추출하고, 이를 바탕으로 임베드 URL을 생성하는 방법으로 문제를 해결해 보았다.

YouTube 동영상 ID 추출

const videoId = youtubeData.url.split("v=")[1].split("&")[0];

split("v=")[1]를 사용하여 동영상 ID를 포함하는 부분을 추출하고,
split("&")[0]을 통해 동영상 ID만을 남긴다.

split 메소드를 두번 사용하였는데, 각각의 기능을 더 자세하게 알아보자.

youtubeData.url.split("v=")[1]

이 코드는 YouTube의 공유 URL에서 동영상 ID를 포함하는 부분을 추출하는 코드이다. 일반적인 YouTube 링크는 https://www.youtube.com/watch?v=VIDEO_ID&...와 같은 형태를 가지고 있다. 여기에서 split("v=")를 사용하면 주소를 "v=" 기준으로 두 부분으로 나누게 된다. 첫 번째 부분은 링크의 앞부분이며, 두 번째 부분은 VIDEO_ID&...이다. 따라서 [1]을 통해 두 번째 부분을 선택한다.

.split("&")[0]

이 부분은 위에서 선택한 VIDEO_ID&... 부분에서 동영상 ID만을 추출하기 위한 코드이다. & 뒤에는 다른 파라미터들이 올 수 있기 때문에, 이를 제거하고 동영상 ID만을 남기기 위해 split("&")를 사용하고, 그 중 첫 번째 부분을 [0]을 통해 선택한다.

임베드 url 생성

const embedUrl = `https://www.youtube.com/embed/${videoId}`;

템플릿 리터럴 보간(백틱기호와 중괄호 사용)을 이용하여 동영상 ID를 임베드 URL에 포함킨다.

생성된 임베드 url을 iframe 태그의 src 속성에 전달

<iframe
  title={youtubeData.title}
  src={embedUrl}
  allowFullScreen
  className={styles.youtubeData}
/>

수정된 전체 코드

interface IYoutubeDataProps {
  youtubeData: IYoutubeData;
}

function YoutubeData({ youtubeData }: IYoutubeDataProps): JSX.Element {
  console.log("youtubeData :", youtubeData);

  const videoId = youtubeData.url.split("v=")[1].split("&")[0];
  const embedUrl = `https://www.youtube.com/embed/${videoId}`;

  return (
    <>
      <div className={styles.youtubeDataContainer}>
        <Link
          target="_blank"
          to={youtubeData.url}
          key={youtubeData.ykey}
          className={styles.link}
        >
          <iframe
            title={youtubeData.title}
            src={embedUrl}
            allowFullScreen
            className={styles.youtubeData}
          />
          <div className={styles.youtubeTitle}>{youtubeData.title}</div>
        </Link>
      </div>
    </>
  );
}

결론

이 과정을 통해 split메소드를 이용하여 YouTube url에서 동영상의 ID를 추출하고, 이를 바탕으로 임베드 url을 생성하는 방법을 알아보았다. 이 기법을 활용하면 YouTube 동영상을 더욱 쉽고 효율적으로 웹 페이지에 통합할 수 있게 될 것이다.