Home
Blogger

YouTube 동영상 amp-iframe 오류 해결

1 min read

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으로 바꿔줍니다. 결과는 다음과 같습니다. 위의 코드로 표시되는 유튜브 동영상입니다.

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

관심 있을 만한 글

  • 구글 블로그에서 다른 사람 블로그를 찾아보는 방법
    구글 블로그에서 읽기 목록에 블로그를 추가하면 다른 사람 블로그의 최신 글을 자신의 홈페이지에서 모아 볼 수 있습니다. 즉, 팔로우(구독) 기능입니다. 목차 관심이 있는 블로그를 읽기 목록에 추가하는 방법 블로그 구독을 취소…
  • 구글 블로그 레이아웃 잠금 푸는 방법: 가젯 삭제, 드래그 안될 때
    레이아웃 가젯(위젯) 중 잠김 상태로 삭제가 되지 않거나 드래그 앤 드롭으로 이동이 되지 않는 경우가 있습니다. 이러한 경우 해결 방법에 대해 알아봅니다. 1. 가젯의 종류 및 ID 확인 애드센스 가젯: Adsense 추천 글 가젯: FeaturedPost 이…
  • 구글 블로그 CSS 추가 방법
    구글 블로그에서 HTML로 작성한 구조를 꾸미기 위해 CSS 스타일을 추가할 수 있습니다. 이 CSS를 추가하여 구글 블로그의 레이아웃 및 디자인을 변경할 수 있습니다. CSS를 추가하는 방법에는 크게 2 가지 방법이 있습니다. 첫 번째 방법은 HTML 보기에 CS…
  • AMP 블로그에 Youtube 재생목록 만들기
    가끔 AMP 블로그에서 Youtube 동영상 중 뮤비 또는 음악의 재생목록을 표시해야 하는 경우가 있습니다. AMP가 아닌 블로그의 경우, YouTube 재생목록을 표시하려면 Youtube에서 제공하는 소스 코드를 iframe 형식으로 사용할 수 있지만 AMP HTML을…
  • 구글 블로그(Blogger) 다음 SEO
    다음 웹마스터 도구 베타 구글 블로그는 "다음 웹마스터 도구 베타"에 블로그를 등록할 수 있습니다. 등록이 완료되면 다음 웹마스터 도구 베타는 Blogger를 웹문서 영역에 노출합니다. 먼저 다음 (Daum) 웹마스터도구 베타로 이동합니다. …
  • YouTube 동영상 amp-iframe 오류 해결
    AMP를 사용하는 블로그에 유튜브 동영상을 삽입하는 방법에는 크게 두 가지 방법이 있습니다. amp-youtube 또는 amp-iframe을 사용합니다. 유튜브 동영상을 삽입하려면 amp-youtube를 사용하는 것이 좋지만 amp-iframe을 사용하여 유튜브 동…

댓글 1개

  1. 2년 전
    I'm getting this exact same (lacks the 'allow-presentation' flag) error with @angular/youtube-player (angular 14). How to resolve this issue for the angular youtube-player? Thanks!!