AMP 블로그에 Youtube 재생목록 만들기

2 min read

가끔 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는 이렇게 만드세요.

  1. amp-youtube 확장 구성 요소 설치 여부 확인.
  2. data-videoid : 재생목록의 처음 동영상 파라미터 ID를 작성.
  3. 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는 이렇게 만드세요.

  1. amp-iframe 확장 구성 요소 설치 여부 확인.
  2. 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 유튜브 재생목록 삽입은 다음과 같이 보입니다.

방문해주셔서 감사합니다. 즐거운 하루 되세요!

관심 있을 만한 글

  • 구글 블로그 파비콘 설정은 일종의 브랜딩으로 블로거가 어떤 곳인지 알릴 수 있는 로고 이미지를 만드는 것입니다. 파비콘을 설정함으로써 다른 블로거와 차별화할 수 있습니다. 목차 파비콘을 설정하지 않으면 어떻게 될까? 구글…
  • 블로그의 글을 선택하면 좌측에 보이는 카테고리가 아래 사진처럼 이상하게 나옵니다. 어느 글이나 클릭하시면 아래 사진처럼 나옵니다. 빨강 네모한 부분의 "공유, 태그, 줌 사용방법" 의 부분이 아예 나오지 않아야 보기 좋을 것 같은데, 데스크탑에서 볼 때 이 부분이 …
  • 구글 블로그 게시물 에디터는 쉽고 빠르게 문서를 편집할 수 있도록 기본적인 키보드 단축키를 지원합니다. 일반적인 블로그 포스팅의 텍스트는 읽기가 지루할 수 있습니다. 굵은 텍스트나 기울임꼴 텍스트 같은 서식 스타일을 사용하여 단어나 문장을 구분하거나 다양한 방식으로 텍스…
  • 구글 블로그에 Blogger 템플릿을 설치하는 것은 매우 쉽습니다. 오늘은 구글 블로그에 새로운 테마/템플릿을 설치하는 방법을 살펴봅니다. 단계별 안내와 함께 두 가지 유형의 설치 방법을 다룹니다. 목차 구글 블로그 템플릿 설치 방법 …
  • 구글 블로그 포스팅하는 것도 좋지만 블로그가 검색 결과에 노출되지 않는다면 고려해볼 사항이 있습니다. 바로 퍼머링크인데요. 블로그에서 퍼머링크는 검색 엔진과 방문자에게 블로그에서 다루고 있는 내용을 이해할 수 있도록 돕는 역할을 합니다. 목차 …
  • 구글 블로그 기본 테마인 Contempo 테마에서 썸네일 이미지를 블러(blur) 처리하여 배경이미지로 사용해봤습니다. 뒷배경이 있는 Contempo 테마에서 적용할 수 있습니다. Contempo 테마 적용 방법 [테마] - [HTML 편집]에…

댓글 쓰기