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

実例

Product Page amp-addthis amp-youtube Integrating Videos in AMP an Overview Video Carousels with amp-carousel

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 にアクセスする

amp-youtube 1.0 0.1

Description

Required Scripts

Supported Layouts

実例

例

属性

検証

amp-youtube