AMP

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>

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 動画 ID。各 YouTube 動画ページの URL に表示されています。 たとえば、URL が「https://www.youtube.com/watch?v=Z1q71gFeRqM」の場合、Z1q71gFeRqM が動画 ID になります。
data-live-channelid YouTube チャンネル ID。永続的ライブ配信 URL に表示されます。たとえば、URL が「https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q」の場合、UCB8Kb4pxYzsDsHxzBfnid4Q がチャンネル ID になります。data-videoid 属性の代わりに data-live-channelid 属性を指定すると、動画 URL の代わりに永続的ライブ配信 URL を埋め込むことができます。チャンネルの場合、デフォルトのプレースホルダは指定できません。動画の場合は、プレースホルダを指定できます(上記の例 2 を参照)。
data-param-* data-param-* 属性はすべて、クエリ パラメータとして YouTube iframe src に追加されます。この属性は、コントロールを表示するかどうかなど、カスタム値を YouTube プラグインに渡す場合に使用します。 キーと値は URI エンコードされます。キーはキャメルケースになります。
  • `data-param-controls=1` は `&controls=1` になります。
YouTube の他のパラメータ オプションについては、YouTube 埋め込みプレーヤー パラメータをご覧ください。
dock amp-video-docking 拡張機能が必要です。 この属性が存在していて、動画を手動で再生している場合、ユーザーが動画コンポーネントの表示領域からスクロール アウトすると、動画は「最小化」され、角または要素に固定されます。詳細については、ドッキング拡張機能のドキュメントをご覧ください。
credentials(省略可) Fetch API で指定されているとおりに credentials オプションを定義します。
  • サポートされている値: `omit`、`include`
  • デフォルト: `include`
プライバシー強化モードで YouTube プレーヤーを使用する場合は、omit 値を渡します。YouTube は通常、プレーヤーが読み込まれると Cookie を設定します。プライバシー強化モードの場合、ユーザーがプレーヤーをクリックしたときに Cookie が設定されます。
共通の属性 この要素には、AMP コンポーネントに拡張された共通の属性が含まれます。

検証

AMP 検証ツール仕様の amp-youtube ルールをご覧ください。

さらに支援が必要ですか?

このドキュメントを何度読み返しても、ご質問のすべてを完全に解消することができませんか?他にも同じ事を感じた人がいるかもしれません。Stack Overflow で問い合わせてみましょう。

Stack Overflow にアクセスする
バグや不足している機能がありますか?

AMP プロジェクトでは皆さんの参加と貢献を強くお勧めしています!当社はオープンソースコミュニティに継続的にご参加いただくことを希望しますが、特に熱心に取り組んでいる問題があれば1回限りの貢献でも歓迎します。

GitHub にアクセスする