HTML 유튜브 영상 삽입 및 iframe 오류 해결 / 유튜브 썸네일 미리보기 방법

유튜브 영상 삽입 방법

HTML 유튜브 영상 iframe 삽입

<iframe src="https://youtube.com/embed/${youtubeId}" width="100%" height="100%" id="video-preview" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

유튜브 영상은 iframe 태그로 쉽게 HTML에 삽입할 수 있습니다.

유튜브 iframe 오류 해결

if (link.includes("youtube.com/watch?v=")) {
    link = "https://www.youtube.com/embed/" + link.split("=")[1];
}

‘www.youtube.com에서 연결을 거부했습니다.’ 화면 오류 해결 방법입니다.
Javascript에서 유튜브 링크 주소 앞부분 형태를 변경해 주면 오류가 발생하지 않습니다.

정상 링크 예시

• https://www.youtube.com/embed/g8L_2eTWWKc

연결 거부 오류 발생하는 링크 예시

• https://www.youtube.com/watch?v=g8L_2eTWWKc
• https://m.youtube.com/watch?v=dxs1BT6W1Bw

---

유튜브 썸네일 미리보기 방법

HTML 유튜브 썸네일 이미지 미리보기

<img src="https://img.youtube.com/vi/${youtubeId}/썸네일유형.jpg">

썸네일 유형에 따라 이미지 해상도가 달라집니다.

유튜브 썸네일 유형

썸네일 종류	사이즈	썸네일 유형
유튜브 원본 썸네일	480x360	0
유튜브 시작 지점 썸네일	120x90	1
유튜브 중간 지점 썸네일	120x90	2
유튜브 끝 지점 썸네일	120x90	3
유튜브 원본 썸네일 (보통품질)	120x90	default
유튜브 원본 썸네일 (중간품질)	320x180	mqdefault
유튜브 원본 썸네일 (고품질)	480x360	hqdefault
유튜브 원본 썸네일 (중간해상도)	640x480	sddefault
유튜브 원본 썸네일 (고해상도)	1280x720, 1920x1080	maxresdefault

이전 프로젝트에서는 mqdefault, maxresdefault를 주로 사용하였습니다.