Youtube 퍼가기 HTML 태그 분석

유튜브 공유 중 퍼가기 버튼

유튜브 영상을 나의 웹페이지에서 재생하고 싶다면 위의 퍼가기 버튼을 누르면 생성되는 아래 html 코드를 나의 html이나 js 코드에 삽입하면 된다.(별도의 js 함수를 하나 구현해야하긴 하지만 일단 넘어간다.)

사용하고자 하는 게시판에서 지원을 한다면 사용이 가능하다.

<iframe width="560" height="315" 
src="https://www.youtube.com/embed/tkEPNMLJCEo" 
title="YouTube video player" frameborder="0" 
allow="accelerometer; autoplay; 
clipboard-write; encrypted-media; 
gyroscope; picture-in-picture" 
allowfullscreen>
</iframe>

 

순서대로 폭, 높이. 영상의 URL, 태그 제목, 경계선 너비, 허용할 기능 목록, 풀스크린허용

필수적인 속성은 폭, 높이, 영상URL 정도가 되겠다. 

테스트 해보면 이렇게 나온다.

자동재생은 막았으니 재생버튼을 눌러야 영상이 재생되고,

풀스크린을 허용했으니 재생후에 풀스크린으로 볼수 있게 된다.

 

아래의 두 링크에서 iframe 태그 삽입이나 이미 삽입된 js 플레이어에 url만 삽입할수 있게 하는 방법을 알려준다.

두방법은 추후 자세하게 작성해보자. 

https://developers.google.com/youtube/player_parameters.html?playerVersion=HTML5#Manual_IFrame_Embeds 

YouTube 내장 플레이어 및 플레이어 매개변수  |  YouTube IFrame Player API

https://developers.google.com/youtube/iframe_api_reference#Loading_a_Video_Player

iframe 삽입에 대한 YouTube Player API 참조 문서  |  YouTube IFrame Player API