[HTML] 유튜브 영상 웹페이지에 삽입하기

생활코딩이나 인프런과 같은 사이트를 보면

실제 영상은 유튜브에 업로드했지만

해당 사이트에서 바로 볼 수 있는 형태로 제공하는 경우가 많습니다.

 

그렇게 제공하는 이유는 아래의 2가지라고 생각합니다.

1. 동영상 저장 공간 무제한 & 공짜

2. 영상을 재생하면서 지불해야하는 데이터 요금 (트래픽) 공짜

 

어쨌든 유튜브의 영상을 표현하려는 페이지로 표현하는 방법은 매우 간단합니다.

 

<iframe> 이라는 태그를 사용하면서 유튜브 영상의 주소를 속성으로 입력해주면 됩니다.

 

단, 우리가 평소에 사용하는 유튜브의 주소를 그대로 넣으면 안되고

영상의 해시코드를 확인해서 앞 부분의 주소를 조금 변경해주어야 됩니다.

 

검은사막 모바일의 광고 영상 주소가 있습니다.

https://www.youtube.com/watch?v=5Gem36OUeSw 

 

 

문자 중 ?v= 으로 나타내는 영상의 고유한 주소가 있습니다.

5Gem36OUeSw

 

현재 유튜브는 어떤 영상이든 11개의 문자로 만들어주는데

이렇게 고정된 길이의 문자로 바꿔주는 것을 해시라고 합니다.

 

이 고유한 주소를 embed 문자와 합쳐서

https://www.youtube.com/embed/5Gem36OUeSw 

YouTube

이렇게 변경된 주소로 접속해보면

브라우저의 화면 전체가 영상으로 재생되는 형태로 보여집니다.

 

이제 마지막으로 <iframe> 태그에 src 속성으로 지정해주면

현재 페이지에서 영상을 바로 재생할 수 있는 형태로 표현됩니다.

 

<iframe src="https://www.youtube.com/embed/5Gem36OUeSw">

 

 

 

정리하자면

보여주고 싶은 영상을 찾은 후 ?v= 뒤의 고유한 문자를 복사한 후

<iframe src="https://www.youtube.com/embed/고유한문자">

형태로 완성시켜주면 됩니다.