AMP를 사용하는 블로그에 유튜브 동영상을 삽입하는 방법에는 크게 두 가지 방법이 있습니다. amp-youtube 또는 amp-iframe을 사용합니다.
유튜브 동영상을 삽입하려면 amp-youtube를 사용하는 것이 좋지만 amp-iframe을 사용하여 유튜브 동영상 또는 재생 목록을 삽입할 수도 있습니다. amp-iframe을 사용하면 개별 동영상 또는 YouTube 동영상 재생 목록을 표시 할 때 오류가 발생하지 않도록 주의해야 할 사항이 있습니다. 발생한 오류는 브라우저 개발자 도구 콘솔에서 확인할 수 있습니다.
Uncaught DOMException: Failed to construct 'PresentationRequest': The document is sandboxed and lacks the 'allow-presentation' flag.
대부분의 오류는 amp-iframe sandbox에서 발생합니다. 위의 개발자 도구 콘솔 에러는 sandbox에서 "allow-presentation"이라는 속성이 누락되어 있음을 알려줍니다. 오류 없이 amp-iframe을 사용하여 유튜브 동영상 및 재생 목록을 표시하려면 다음과 같은 코드를 사용할 수 있습니다.
<amp-iframe allowfullscreen=""
frameborder="0"
height="270"
layout="responsive"
sandbox="allow-scripts allow-same-origin allow-popups allow-presentation"
src="https://www.youtube.com/embed/XXXXXXXXXXX"
width="480">
<amp-img height="270"
layout="fixed-height"
noloading=""
placeholder=""
src="https://1.bp.blogspot.com/-5iGrVq2oqjg/YFwcb9pB8NI/AAAAAAAACHI/uay1yTS3dU8u2sx1_W7wUnZDiCScdiwHgCLcBGAsYHQ/s0/amp-iframe-youtube.png"></amp-img>
</amp-iframe>
XXXXXXXXXXX로 표시된 부분을 YouTube 동영상 embed URL으로
바꿔줍니다. 결과는 다음과 같습니다. 위의 코드로 표시되는 유튜브 동영상입니다.