Include iframes

Learn how to display include media content in your pages, and how to use iframes to display advanced content outside of AMP's limitations.

기본사항

amp-iframe 요소를 사용하여 페이지에 iframe을 표시할 수 있습니다.

iframe은 사용자가 허용한 JavaScript를 필요로 하는 콘텐츠와 같이 AMP의 메인 페이지 컨텍스트에서 지원되지 않는 콘텐츠를 표시할 때 특히 유용합니다.

`amp-iframe` 요구사항

첫 번째 표시 영역은 상단에서부터 최소 600px 또는 75% 떨어져 있어야 합니다(placeholder가 사용된 iframes 제외).
HTTPS를 통해서만 리소스를 요청할 수 있으며, allow-same-origin을 지정하지 않는 한 컨테이너와 동일한 출처에 있을 수 없습니다.

읽어보기 –
amp-iframe 전체 사양에서 자세한 내용을 알아보세요.

스크립트 추가

페이지에 amp-iframe을 포함하려면 우선 다음 스크립트를 <head>에 추가합니다. 이 작업을 통해 확장 컴포넌트에 다음과 같은 추가 코드가 로드됩니다.

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

마크업 작성

다음 예시에서 Google Maps Embed API를 통해 Google Map을 삽입하기 위한 반응형 amp-iframe이 생성되었습니다.

<amp-iframe
  width="200"
  height="100"
  sandbox="allow-scripts allow-same-origin"
  layout="responsive"
  src="https://www.google.com/maps/embed/v1/place?key={YOUR API KEY}&q=europe"
>
</amp-iframe>

플레이스홀더 사용하기

placeholder 속성이 포함된 amp-iframe 요소(예: amp-img 요소)가 있을 경우 문서 상단에 amp-iframe을 표시할 수 있습니다. 이러한 요소는 iframe을 표시할 준비가 될 때까지 플레이스홀더로 렌더링됩니다.

읽어보기 – 플레이스홀더가 포함된 iframe 문서를 통해 플레이스홀더에 대해 자세히 알아보세요.

플레이스홀더 사용 예시:

<amp-iframe
  width="400"
  height="225"
  sandbox="allow-scripts allow-same-origin"
  layout="responsive"
  src="https://giphy.com/embed/OWabwoEn7ezug"
>
  <amp-img
    placeholder
    layout="fill"
    src="https://ampproject-b5f4c.firebaseapp.com/examples/images/kittens-biting.jpg"
  ></amp-img>
</amp-iframe>

다음과 같이 렌더링됩니다:

예시

AMP by Example 페이지에서 더 복잡한 amp-iframe 예시를 확인할 수 있습니다.

Written by @pbakaus
with contributions from @Meggin and @bpaduch