HTML 유튜브 영상 자동/반복 재생 하기 (크롬/익스플로러)

자신이 촬영한 영상을 유튜브에 업로드하여, 이 업로드된 영상이 홈페이지나 쇼핑몰에 넣는방법에 대해서 알아보도록 하겠다 우선 소스는 친절히도 유튜브내에서 소스를 간단하게 얻어올수 있다.

 

먼저 유튜브 영상의 소스를 얻기 위해 유튜브영상 하나를 열도록한다

 

www.youtube.com/

YouTube

 

원하는 영상이나 자신의 영상주소를 알고있다면 영상으로 이동하여 우클릭을 한다

 

영상에 우클릭을 하게되면 소스 코드 복사 라는 기능이 보인다, 소스코드를 복사하게 되면 아래와같다.

 

 

 

<iframe width="923" height="673" src="https://www.youtube.com/embed/P1RVoMmRqTg" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

위의 소스와같은데, 위의 소스에서 정작 필요한건,

 

영상을 구분하는 키값인 P1RVoMmRqTg 라는 값이 보일것이다. 이 키값은 유튜브내에서 해당영상을 지칭하는 키값이라고 보면 되겠다.

 

<iframe width="가로사이즈" height="세로사이즈" src="https://www.youtube.com/embed/영상키값?rel=0&amp;autoplay=1&mute=1&amp;loop=1;playlist=영상키값" frameborder="0"></iframe>

소스는 위와같다, 가로와 세로사이즈를 지정하여주고, 영상키값 뒤에 ?autoplay=1&mute=1 라는 값을 넣어주는것이 핵심이다. 

소스상으로는, ?autoplay=1 라는값만 넣었을때 자동재생하게되어있지만 크롬에서는 음소거를 해주지않으면 자동재생이 되지않기 때문에, &mute=1 음소거를 추가하여 크롬에서도 자동재생이 되도록 하였다.