가끔 AMP 블로그에서 Youtube 동영상 중 뮤비 또는 음악의 재생목록을 표시해야
하는 경우가 있습니다. AMP가 아닌 블로그의 경우, YouTube 재생목록을 표시하려면
Youtube에서 제공하는 소스 코드를 iframe 형식으로 사용할 수 있지만 AMP
HTML을 사용하는 블로그는 Youtube 동영상 재생 목록을 표시하려면
iframe 형식과는 조금 다른 2가지 방법을 사용할 수 있습니다. 바로
amp-youtube 하고 amp-iframe 입니다.
유튜브에서 일반적으로 제공하는 embed 소스 코드는 아래와 같습니다.
<iframe width="1280"
height="720"
src="https://www.youtube.com/embed/z6CSW2yu8Mg?list=PLNF8K9Ddz0kJ36dXtkVmHHhcXVgSzoXIs"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen>
</iframe>
https://www.youtube.com/watch?v=z6CSW2yu8Mg&list=PLNF8K9Ddz0kJ36dXtkVmHHhcXVgSzoXIs
표시된 부분은 Youtube 동영상의 재생목록 URL 주소입니다. 이 URL 주소는 iframe 형식에서 embed URL로 변경됩니다. 이제 이 URL 주소로 AMP 블로그에 Youtube 재생 목록을 표시하기 위해 실제 예시와 함께 AMP HTML 코드 작성을 해보겠습니다.
amp-youtube 재생목록 만들기
amp-youtube는 이렇게 만드세요.
- amp-youtube 확장 구성 요소 설치 여부 확인.
- data-videoid : 재생목록의 처음 동영상 파라미터 ID를 작성.
- data-param-list : 재생 목록의 ID를 작성.
<amp-youtube width="480"
height="270"
layout="responsive"
data-videoid="z6CSW2yu8Mg"
data-param-listType="playlist"
data-param-list="PLNF8K9Ddz0kJ36dXtkVmHHhcXVgSzoXIs">
</amp-youtube>
amp-iframe 재생목록 만들기
amp-iframe는 이렇게 만드세요.
- amp-iframe 확장 구성 요소 설치 여부 확인.
- iframe 형식과 동일한 embed URL 주소를 작성.
<amp-iframe width="480"
height="270"
layout="responsive"
sandbox="allow-scripts allow-same-origin allow-popups allow-presentation"
frameborder="0"
allowfullscreen="allowfullscreen"
src="https://www.youtube.com/embed/BMesMlKi2oc?list=PLNF8K9Ddz0kItIojCCyaEbKK6WoH2ohRK">
</amp-iframe>
참고
amp-iframe이 페이지 상단에서 600px 이상 떨어져 밑에 위치해야 합니다.
또는 페이지 상단 화면의 약 75%를 차지하지 말아야 합니다. AMP 페이지 상단에
아이프레임 사용 제한은 페이지 렌더링을 방해하지 않도록 하기 위한 AMP
규칙입니다. amp-iframe를 페이지 상단에 위치하게 하려면 자리표시자
placeholder 속성을 추가하여 문제를 해결할 수 있습니다.
amp-iframe 유튜브 재생목록 삽입은 다음과 같이 보입니다.