사전 준비
AMP 페이지에 Youtube 비디오을 표시하려면 블로그에 amp-youtube 용 JS
라이브러리를 추가해야 합니다. 먼저 아래 스크립트를
<head> 섹션에 붙여 넣습니다.
<script async custom-element='amp-youtube' src='https://cdn.ampproject.org/v0/amp-youtube-1.0.js'/>
참고: 이 스크립트가 이미 추가되어 있는 경우 다시 삽입할 필요가 없습니다.
Youtube 비디오 ID 가져오기
AMP 페이지에 표시할 비디오 ID를 복사합니다. 비디오 ID는 다음과 같이 비디오의 URL 주소 끝에 있습니다.
youtube.com/watch?v=xxxxxxxxxxx
아래의 태그에 가져온 비디오 ID를 붙여넣으세요.
<amp-youtube data-videoid='xxxxxxxxxxx' layout='responsive' width='480' height='270'></amp-youtube>
이 태그에 지원되는 레이아웃은 fill, fixed,
fixed-height, nodisplay,
responsive 입니다. 반응형 레아이웃인
responsive 속성을 사용하면 자동으로 비디오의 너비와 높이가 가로
세로 비율 16:9로 맞춰집니다.
자동 재생 (Autoplay)
자동 재생을 설정하면 페이지를 스크롤할 때 Youtube 비디오를 자동으로 재생 / 일시 중지하고, 자동 재생이 시작되면 비디오가 자동으로 음소거되고 사용자가 비디오를 클릭 / 탭하면 사운드가 나타납니다.
이 기능은 일부 브라우저에서 지원되지 않을 수 있지만 사용해 보려면
autoplay='autoplay' 속성을 amp-youtube 태그에
추가합니다. 예를 들어 다음과 같이 코드를 작성할 수 있습니다.
<amp-youtube autoplay='autoplay' data-videoid='xxxxxxxxxxx' layout='responsive' width='480' height='270'></amp-youtube>
amp-youtube의 레이아웃에 대한 자세한 설명은 공식 웹사이트에서 찾아 볼 수 있습니다.