Home
AMP

AMP 블로그 유튜브 YouTube 동영상 삽입 방법

1 min read
AMP YouTube 동영상을 표시 방법

구글 블로그 AMP에서 유튜브 동영상을 표시하려면 먼저 <head> 와 </head> 태그 사이에 아래 스크립트 코드를 추가하세요. 이 코드가 없으면 유튜브 동영상이 표시되지 않습니다. 

<script async="async" custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"/>

게시물에 아래 코드 태그를 추가하면 크기와 배치를 원하는대로 조정할 수 있습니다. 

<amp-youtube data-videoid="xxxxxxxxxxx" width="480" height="270" layout="responsive"/>

마킹 표시된 부분은 유튜브 비디오 URL에서 가져온 11자리 코드입니다.

AMP 페이지에 유튜브 비디오 삽입하기 AMP 페이지에 유튜브 비디오 삽입하기

<amp-youtube/> 에서 지원하는 레이아웃은 다음과 같습니다.

  • fill
  • fixed
  • fixed-height
  • flex-item
  • nodisplay
  • responsive
방문해주셔서 감사합니다. 즐거운 하루 되세요!

관심 있을 만한 글

  • 구글 AMP – User Notification
    구글 amp-user-notification은 사용자에게 닫을 수 있는 대화 상자 메시지를 표시하는데 사용됩니다. 우리는 페이지의 쿠키에 대해 사용자에게 알리는데 사용할 수 있습니다. amp-user-notification을 사용하려면 페이지에 다음 스크립트를 추가해야 합니다. <sc…
  • 구글 AMP – Actions 및 Events
    amp-component에서 액션이나 이벤트를 사용하려면 on 속성을 사용할 수 있습니다. 이 글에서는 이에 대해 자세히 설명하겠습니다. Events 이벤트에 대한 액션 구문은 다음과 같습니다. on="eventName:elementId[.methodName[(arg1=value, arg2=value…
  • 구글 AMP – 애니메이션
    Amp-animation은 다른 amp 구성 요소에서 사용할 애니메이션을 정의하는 amp 구성 요소입니다. 이 글에서는 이에 대해 자세히 설명합니다. Amp-animation을 사용하려면 다음 스크립트를 추가해야 합니다. <script async custom-element="amp-animati…
  • 구글 AMP – List
    Amp-list는 CORS json 엔드 포인트를 호출하고 템플릿 내부의 json 파일 형식으로 데이터를 표시하는 amp 구성 요소입니다. 예제의 도움으로 이것을 이해합시다. amp-list를 사용하려면 다음 스크립트를 포함해야 합니다. <script async custom-element="am…
  • 구글 AMP – Font
    Amp 글꼴은 기본적으로 amp 페이지에 대한 사용자 지정 글꼴을 트리거하고 모니터링하는 데 도움이 되는 amp의 amp 구성 요소입니다. 이 글에서는 amp-font에 대해 자세히 설명합니다. Amp-font를 사용하려면 다음 자바스크립트 파일을 추가해야 합니다. <script async …
  • 구글 AMP – 동적 CSS 클래스
    amp-dynamic-css-classes는 body 태그에 동적 클래스를 추가합니다. 이 글에서는 이 태그에 대해 자세히 알아보겠습니다. amp-dynamic-css-classes로 작업하려면 다음 스크립트를 추가해야 합니다. <script async custom-element="amp-dyn…

댓글 쓰기