Important: this documentation is not applicable to your currently selected format stories!

amp-youtube

You can now use this component outside valid AMP documents using the Bento version of this component. Learn more in the Bento guide.

Description

YouTube 동영상을 표시합니다.

Required Scripts

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

Supported Layouts

fill fixed fixed-height flex-item nodisplay responsive

YouTube 동영상을 표시합니다.

필수 스크립트	`<script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>`
지원되는 레이아웃	fill, fixed, fixed-height, flex-item, nodisplay, responsive
예	amp-youtube의 주석이 포함된 코드 예

예

반응형 레이아웃에서 예에 표시된 너비와 높이를 사용하면 가로세로 비율이 16:9인 동영상에 맞는 올바른 레이아웃이 생성되어야 합니다.

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

  <amp-youtube
      id="myLiveChannel"
      data-live-channelid="UCB8Kb4pxYzsDsHxzBfnid4Q"
      width="358"
      height="204"
      layout="responsive">
    <amp-img
      src="https://i.ytimg.com/vi/Wm1fWz-7nLQ/hqdefault_live.jpg"
      placeholder
      layout="fill"
      />
  </amp-youtube>

속성

autoplay	이 속성이 있으면 브라우저에서 자동 재생을 지원합니다. 자동 재생이 시작되기 전에 동영상이 자동으로 음소거됩니다. 동영상이 보이지 않게 스크롤하면 동영상이 일시중단됩니다. 동영상이 보이게 스크롤하면 동영상이 다시 재생됩니다. 사용자가 동영상을 탭하면 동영상의 음소거가 해제됩니다. 사용자가 동영상과 상호작용하고(예: 음소거/음소거 해제, 일시중지/일시중지 해제) 동영상이 보이게 스크롤하거나 보이지 않게 스크롤하면 동영상이 사용자가 남겨 둔 상태 그대로 남아 있습니다. 예를 들어 사용자가 동영상을 일시중지한 다음 동영상이 보이지 않게 스크롤했다가 동영상으로 되돌아오면, 동영상은 여전히 일시중지한 상태로 남아 있습니다.
data-videoid	모든 YouTube 동영상 페이지 URL에 있는 YouTube 동영상 ID입니다. 예를 들어 https://www.youtube.com/watch?v=Z1q71gFeRqM이라는 URL에서 `Z1q71gFeRqM`이 동영상 ID입니다.
data-live-channelid	안정된 실시간 스트림 URL을 제공하는 YouTube 채널 ID입니다. 예를 들어 https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q라는 URL에서는 `UCB8Kb4pxYzsDsHxzBfnid4Q`가 채널 ID입니다. 동영상이 아니라 실시간 스트림에 사용할 안정된 URL을 삽입하도록 `data-videoid`가 아닌 `data-live-channelid`를 제공할 수 있습니다. 채널에는 기본 자리표시자가 포함되어 있지 않습니다. 위의 예제 2에서 사용하는 동영상의 자리표시자를 제공할 수 있습니다.
data-param-*	`data-param-*` 속성은 쿼리 매개변수로 YouTube iframe src에 추가됩니다. 컨트롤 표시 여부와 같은 맞춤 값을 YouTube 플러그인에 전달하는 데 사용할 수 있습니다. 키와 값은 URI로 인코딩됩니다. 키는 대소문자를 구분합니다. `data-param-controls=1` becomes `&controls=1` YouTube의 추가 매개변수 옵션은 YouTube 내장 플레이어 매개변수를 참조하세요.
dock	`amp-video-docking` 확장 프로그램이 필요합니다. 이 속성이 있고 동영상을 수동으로 재생하는 경우 사용자가 동영상 구성요소의 시각적 영역 밖으로 스크롤하면 동영상이 '최소화'되고 모서리 또는 요소에 고정됩니다. 자세한 내용은 도킹 확장 프로그램 자체에 관한 문서를 참조하세요.
credentials(선택사항)	`Fetch API`에 지정된 대로 credentials 옵션을 정의합니다. 지원되는 값: `omit`, `include` 기본값: `include` 개인정보 보호 강화 모드에서 YouTube 플레이어를 사용하려는 경우 `omit` 값을 전달합니다. 일반적으로 플레이어를 로드할 때 YouTube에서 쿠키를 설정합니다. 개인정보 보호 강화 모드에서 사용자가 플레이어를 클릭하면 쿠키가 설정됩니다.
공통 속성	이 요소에는 AMP 구성요소로 확장된 공통 속성이 포함되어 있습니다.

유효성 검사

AMP 유효성 검사기 사양에서 amp-youtube 규칙을 참조하세요.

도움이 더 필요하신가요?

이 문서를 수십 번 읽었음에도 여전히 궁금한 점이 남아 있나요? 다른 개발자들도 같은 심정일지 모릅니다. Stack Overflow에서 소통해 보세요.

Stack Overflow로 이동

버그나 누락된 기능을 발견하셨나요?

AMP 프로젝트는 여러분의 참여와 기여를 적극 환영합니다! 오픈 소스 커뮤니티를 통해 지속적으로 활동해 주셔도 좋지만 관심 있는 주제에 한 번만 기여하셔도 큰 도움이 됩니다.

GitHub로 이동하기

amp-youtube 1.0 0.1

Description

Required Scripts

Supported Layouts

예

속성

유효성 검사

amp-youtube