AMPドキュメント

外部サイト表示のAMP専用タグ

3Qの動画プレーヤーを表示

説明

3Qの動画プレーヤーを表示

使い方

<amp-3q-player 属性>
</amp-3q-player>

必要なスクリプト

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

属性

属性名 説明
data-id(必須) DataID
autoplay 自動再生
fallback フォールバック。対象の要素にブラウザが未対応や読み込みに失敗などをユーザに伝えるもの
heights メディア式に基づいた要素の縦サイズ
layout レイアウト
media メディア属性
noloading 進捗インジケータ(グルグル回るアイコンみたいなやつ)をOFF
on イベントの実行用
placeholder 親要素のプレスホルダー(アニメーションや画像などで読み込まれる前に表示されるやつ)
sizes メディア式に基づいた要素の横サイズ
width 横幅
height 高さ

レイアウト

レイアウト名 説明
fill 利用可能なスペースを埋めるよう自動的にサイズ調整
fixed 指定した横幅と高さで固定
flex-item 親要素や周りの要素に応じて自動的にサイズ調整
responsive 画面サイズに応じて自動的にサイズ調整

基本的な使い方

<amp-3q-player
  data-id="c8dbe7f4-7f7f-11e6-a407-0cc47a188158"
  layout="responsive"
  width="480"
  height="270">
</amp-3q-player>

自動再生(autoplay)

<amp-3q-player
  autoplay
  id="video"
  data-id="c8dbe7f4-7f7f-11e6-a407-0cc47a188158"
  layout="responsive"
  height="360"
  width="640">
</amp-3q-player>

ドイツ生まれの少額決済システムLaterPayの設定

説明

ドイツ生まれの少額決済システム(LaterPay)の設定

使い方

表示

権限がある場合
<div amp-access="access" amp-access-hide="">
</div>
権限がない場合
<section amp-access="NOT error AND NOT access" amp-access-hide="">
</section>
エラーの場合
<section class="error-section" amp-access="error" amp-access-hide="">
</section>

設定

<script id="amp-access" type="application/json">
  {
    "vendor": "laterpay",
    "laterpay": {
      "property": value
    }
  }
</script>

必要なスクリプト

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

laterpay オプション

名前 説明
articleTitleSelector(必須) ページ内の要素を決定するCSSセレクタ
articleId 記事と購入オプションをマッチング
jwt 動的な支払い設定用のJWTトークン
locale ロケール
localeMessages 生成した購入オプションのリスト内のテキストをカスタマイズまたはローカライズ
scrollToTopAfterAuth 承認プロセスが成功すると、ページが最上部までスクロールするかどうか
region 地域(eu or us)
sandbox サンドボックスモード

基本的な使い方

<script id="amp-access" type="application/json">
  {
    "vendor": "laterpay",
    "laterpay": {
      "articleTitleSelector": ".content-container > header > h1",
      "localeMessages": {
        "header": "LaterPay"
      }
    }
  }
</script>
<section amp-access="NOT error AND NOT access" amp-access-hide>
  <div id="amp-access-laterpay-dialog" class="amp-access-laterpay"></div>
</section>
<section amp-access="error" amp-access-hide class="error-section">
  Oops... Something broke.
</section>
<div amp-access="access" amp-access-hide class="article-body" itemprop="articleBody">
</div>

Pooolペイウォールを表示

説明

Pooolペイウォールを表示

使い方

HTML

<section poool-access-preview amp-access="NOT access">
</section>
<section poool-access-content amp-access="access" amp-access-hide>
</section>
<section amp-access="NOT error AND NOT access" id="poool">
</section>

設定

<script id="amp-access" type="application/json">
  {
    "vendor": "poool",
    "poool": {
      設定
    }
  }
</script>

必要なスクリプト

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

設定

設定名 説明
bundleID(必須) アプリID(ダッシュボードで確認可能)
itemID(必須) 記事ID
pageType(必須) ユーザがページにアクセスしたことを伝えるキー
debug デバックモード
forceWidget 現在のウィジェット
loginButtonEnabled ログインボタンの有無
signatureEnabled 記事がロックされた時に表示される署名の有無
videoClient 動画の設定
customSegment カスタムグループ/セグメントスラッグでネイティブセグメントをオーバーライド
cookiesEnabled Cookeを無効

基本的な使い方

<script id="amp-access" type="application/json">
  {
    "vendor": "poool",
    "poool": {
      "bundleID": "Q9X1R-27SFS-MYC31-MCYQ1",
      "forceWidget": "gift",
      "cookiesEnabled": "true",
      "itemID": "amp-article-test",
      "customSegment": "amp-segment"
    }
  }
</script>
<section poool-access-preview amp-access="NOT access">
  <p>権限がありません</p>
</section>
<section amp-access="error" amp-access-hide class="error-section">
  Oops... Something broke.
</section>
<section poool-access-content amp-access="access" amp-access-hide>
  <p>権限があります</p>
</section>
<section amp-access="NOT error AND NOT access" id="poool">
</section>

AddThisのコンテンツを表示

説明

AddThisのコンテンツを表示
AddThisは、ソーシャルボタンをまとめて設置できるサービス

使い方

<amp-addthis 属性>
</amp-addthis>

必要なスクリプト

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

属性

属性名 説明
data-pub-id(必須) サイト運営者ID
data-widget-id(必須) ウィジェットID
data-widget-type(必須) ウィジェットタイプ
data-title タイトル
data-url URL
data-media 画像や動画のURL
data-description 説明
fallback フォールバック。対象の要素にブラウザが未対応や読み込みに失敗などをユーザに伝えるもの
heights メディア式に基づいた要素の縦サイズ
layout レイアウト
media メディア属性
noloading 進捗インジケータ(グルグル回るアイコンみたいなやつ)をOFF
on イベントの実行用
placeholder 親要素のプレスホルダー(アニメーションや画像などで読み込まれる前に表示されるやつ)
sizes メディア式に基づいた要素の横サイズ
width 横幅
height 高さ

レイアウト

レイアウト名 説明
fill 利用可能なスペースを埋めるよう自動的にサイズ調整
fixed 指定した横幅と高さで固定
fixed-height 指定した高さで固定。横幅は自動的にサイズ調整
flex-item 親要素や周りの要素に応じて自動的にサイズ調整
nodisplay 要素が非表示
responsive 画面サイズに応じて自動的にサイズ調整

フローティング

<amp-addthis
  width="320"
  layout="responsive"
  data-pub-id="ra-5c191331410932ff"
  data-widget-id="957l"
  data-widget-type="floating">
</amp-addthis>

インライン

<amp-addthis
  width="320"
  height="92"
  data-pub-id="ra-5c191331410932ff"
  data-widget-id="mv93"
  data-widget-type="inline">
</amp-addthis>

Apesterのコンテンツを表示

説明

エイプスター(Apester)のコンテンツを表示

使い方

<amp-apester-media 属性>
</amp-apester-media>

必要なスクリプト

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

属性

属性名 説明
data-apester-media-id メディアID
data-apester-channel-token チャンネルトークン
fallback フォールバック。対象の要素にブラウザが未対応や読み込みに失敗などをユーザに伝えるもの
heights メディア式に基づいた要素の縦サイズ
layout レイアウト
media メディア属性
noloading 進捗インジケータ(グルグル回るアイコンみたいなやつ)をOFF
on イベントの実行用
placeholder 親要素のプレスホルダー(アニメーションや画像などで読み込まれる前に表示されるやつ)
sizes メディア式に基づいた要素の横サイズ
width 横幅
height 高さ

レイアウト

レイアウト名 説明
fill 利用可能なスペースを埋めるよう自動的にサイズ調整
fixed 指定した横幅と高さで固定
fixed-height 指定した高さで固定。横幅は自動的にサイズ調整
flex-item 親要素や周りの要素に応じて自動的にサイズ調整
nodisplay 要素が非表示
responsive 画面サイズに応じて自動的にサイズ調整

基本的な使い方

 <amp-apester-media
   height="390"
   data-apester-media-id="#">
 </amp-apester-media>

プレイリスト

<amp-apester-media
  height="390"
  data-apester-channel-token="#">
</amp-apester-media>

BeOpのコンテンツを表示

説明

BeOpのコンテンツを表示
BeOpは主にヨーロッパの主要メディアと連携している広告サイト

使い方

<amp-beopinion 属性>
</amp-beopinion>

必要なスクリプト

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

属性

属性名 説明
data-account(必須) アカウント ID
data-content(必須) コンテンツ ID
data-name スロット名前
fallback フォールバック。対象の要素にブラウザが未対応や読み込みに失敗などをユーザに伝えるもの
heights メディア式に基づいた要素の縦サイズ
layout レイアウト
media メディア属性
noloading 進捗インジケータ(グルグル回るアイコンみたいなやつ)をOFF
on イベントの実行用
placeholder 親要素のプレスホルダー(アニメーションや画像などで読み込まれる前に表示されるやつ)
sizes メディア式に基づいた要素の横サイズ
width 横幅
height 高さ

レイアウト

レイアウト名 説明
fill 利用可能なスペースを埋めるよう自動的にサイズ調整
fixed 指定した横幅と高さで固定
fixed-height 指定した高さで固定。横幅は自動的にサイズ調整
flex-item 親要素や周りの要素に応じて自動的にサイズ調整
intrinsic 指定したアスペクト比に自動的にサイズ調整
nodisplay 要素が非表示
responsive 画面サイズに応じて自動的にサイズ調整

基本的な使い方

<amp-beopinion
  width="375"
  height="472"
  layout="responsive"
  data-account="589446dd42ee0d6fdd9c3dfd"
  data-content="5a703a2f46e0fb00016d51b3"
  data-name="content-slot">
</amp-beopinion>

Brid.tvの動画プレーヤーを表示

説明

Brid.tvの動画プレーヤーを表示

使い方

<amp-brid-player 属性>
</amp-brid-player>

必要なスクリプト

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

属性

属性名 説明
data-partner(必須) パートナーID
data-player(必須) プレーヤーID
data-video(必須) ビデオID
autoplay 自動再生
data-playlist プレイリストID
data-outstream ストリームユニットID
data-dynamic ダイナミックプレイリストタイプ
fallback フォールバック。対象の要素にブラウザが未対応や読み込みに失敗などをユーザに伝えるもの
heights メディア式に基づいた要素の縦サイズ
layout レイアウト
media メディア属性
noloading 進捗インジケータ(グルグル回るアイコンみたいなやつ)をOFF
on イベントの実行用
placeholder 親要素のプレスホルダー(アニメーションや画像などで読み込まれる前に表示されるやつ)
sizes メディア式に基づいた要素の横サイズ
width 横幅
height 高さ

レイアウト

レイアウト名 説明
fill 利用可能なスペースを埋めるよう自動的にサイズ調整
fixed 指定した横幅と高さで固定
fixed-height 指定した高さで固定。横幅は自動的にサイズ調整
flex-item 親要素や周りの要素に応じて自動的にサイズ調整
nodisplay 要素が非表示
responsive 画面サイズに応じて自動的にサイズ調整

基本的な使い方

<amp-brid-player
  id="myVideo"
  data-partner="264"
  data-player="4144"
  data-video="13663"
  layout="responsive"
  width="480" height="270">
</amp-brid-player>
<button on="tap:myVideo.play">Play</button>
<button on="tap:myVideo.pause">Pause</button>
<button on="tap:myVideo.mute">Mute</button>
<button on="tap:myVideo.unmute">Unmute</button>
<button on="tap:myVideo.fullscreen">Fullscreen</button>

自動再生(autoplay)

<amp-brid-player
  autoplay
  data-partner="264"
  data-player="4144"
  data-video="13663"
  layout="responsive"
  width="480" height="270">
</amp-brid-player>

ストリームユニットIDを指定(data-outstream)

<amp-brid-player
  autoplay
  data-partner="6205"
  data-player="0"
  data-outstream="3828"
  layout="responsive"
  width="480" height="270">
</amp-brid-player>

Brightcoveの動画プレーヤーを表示

説明

ブライトコーブ(Brightcove)の動画プレーヤーを表示

使い方

<amp-brightcove 属性>
</amp-brightcove>

必要なスクリプト

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

属性

属性名 説明
data-account(必須) アカウントID
data-video-id(必須) 動画ID
data-player プレーヤーID(推奨)
data-player-id プレーヤーID
data-embed ビデオID
data-playlist-id プレイリストID
data-referrer リファラー
data-param-* Brightcoveの詳細設定
autoplay 自動再生するか
fallback フォールバック。対象の要素にブラウザが未対応や読み込みに失敗などをユーザに伝えるもの
heights メディア式に基づいた要素の縦サイズ
layout レイアウト
media メディア属性
noloading 進捗インジケータ(グルグル回るアイコンみたいなやつ)をOFF
on イベントの実行用
placeholder 親要素のプレスホルダー(アニメーションや画像などで読み込まれる前に表示されるやつ)
sizes メディア式に基づいた要素の横サイズ
width 横幅
height 高さ

レイアウト

レイアウト名 説明
fill 利用可能なスペースを埋めるよう自動的にサイズ調整
fixed 指定した横幅と高さで固定
fixed-height 指定した高さで固定。横幅は自動的にサイズ調整
flex-item 親要素や周りの要素に応じて自動的にサイズ調整
nodisplay 要素が非表示
responsive 画面サイズに応じて自動的にサイズ調整

基本的な使い方

<amp-brightcove
  id="myPlayer"
  data-referrer="EXTERNAL_REFERRER"
  data-account="1290862519001"
  data-video-id="ref:amp-docs-sample"
  data-player-id="SyIOV8yWM"
  layout="responsive" width="480" height="270">
</amp-brightcove>
<button on="tap:myPlayer.play">Play</button>
<button on="tap:myPlayer.pause">Pause</button>
<button on="tap:myPlayer.mute">Mute</button>
<button on="tap:myPlayer.unmute">Unmute</button>
<button on="tap:myPlayer.fullscreen">Fullscreen</button>

自動再生(autoplay)

<amp-brightcove
  id="myPlayer"
  autoplay
  data-account="1290862519001"
  data-video-id="ref:amp-docs-sample"
  data-player-id="SyIOV8yWM"
  layout="responsive" width="480" height="270">
</amp-brightcove>

BySideの動画プレーヤーを表示

説明

BySideの動画プレーヤーを表示

使い方

<amp-byside-content 属性>
</amp-byside-content>

必要なスクリプト

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

属性

属性名 説明
data-webcare-id(必須) 顧客アカウントID
data-label(必須) コンテンツラベル
data-lang コンテンツを表示する言語
data-channel チャネル識別子
data-fid ビジターフォースID
fallback フォールバック。対象の要素にブラウザが未対応や読み込みに失敗などをユーザに伝えるもの
heights メディア式に基づいた要素の縦サイズ
layout レイアウト
media メディア属性
noloading 進捗インジケータ(グルグル回るアイコンみたいなやつ)をOFF
on イベントの実行用
placeholder 親要素のプレスホルダー(アニメーションや画像などで読み込まれる前に表示されるやつ)
sizes メディア式に基づいた要素の横サイズ
width 横幅
height 高さ

レイアウト

レイアウト名 説明
fill 利用可能なスペースを埋めるよう自動的にサイズ調整
fixed 指定した横幅と高さで固定
fixed-height 指定した高さで固定。横幅は自動的にサイズ調整
flex-item 親要素や周りの要素に応じて自動的にサイズ調整
nodisplay 要素が非表示
responsive 画面サイズに応じて自動的にサイズ調整

基本的な使い方

<amp-byside-content
  data-webcare-id="D6604AE5D0"
  data-lang="en"
  data-label="amp-responsive"
  layout="responsive"
  height="500"
  width="1024">
</amp-byside-content>

言語指定

<amp-byside-content
  data-webcare-id="D6604AE5D0"
  data-label="amp-simple"
  height="300"
  layout="fixed-height">
</amp-byside-content>

クラウドホストの動画プレーヤーを表示

説明

クラウドホストの動画プレーヤーを表示

使い方

<amp-connatix-player 属性>
</amp-connatix-player>

必要なスクリプト

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

属性

属性名 説明
data-player-id(必須) プレーヤーID
data-media-id メディアID
fallback フォールバック。対象の要素にブラウザが未対応や読み込みに失敗などをユーザに伝えるもの
heights メディア式に基づいた要素の縦サイズ
layout レイアウト
media メディア属性
noloading 進捗インジケータ(グルグル回るアイコンみたいなやつ)をOFF
on イベントの実行用
placeholder 親要素のプレスホルダー(アニメーションや画像などで読み込まれる前に表示されるやつ)
sizes メディア式に基づいた要素の横サイズ
width 横幅
height 高さ

レイアウト

レイアウト名 説明
fill 利用可能なスペースを埋めるよう自動的にサイズ調整
fixed 指定した横幅と高さで固定
fixed-height 指定した高さで固定。横幅は自動的にサイズ調整
flex-item 親要素や周りの要素に応じて自動的にサイズ調整
nodisplay 要素が非表示
responsive 画面サイズに応じて自動的にサイズ調整

基本的な使い方

<amp-connatix-player
  data-player-id="f721b0d8-7a79-42b6-b637-fa4e86138ed9"
  layout="responsive"
  width="150"
  height="80">
</amp-connatix-player>

Media Idを指定

<amp-connatix-player
  data-media-id="527207df-2007-43c4-b87a-f90814bafd2e"
  data-player-id="f721b0d8-7a79-42b6-b637-fa4e86138ed9"
  layout="responsive"
  width="480"
  height="270">
</amp-connatix-player>

Dailymotionの動画プレーヤーを表示

説明

Dailymotionの動画プレーヤーを表示

使い方

<amp-dailymotion 属性>
</amp-dailymotion>

必要なスクリプト

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

属性

属性名 説明
data-videoid(必須) ビデオID
height(必須) 高さ
width(必須) 横幅
autoplay 自動再生
data-mute ミュート
data-endscreen-enable 再生終了後に関連動画を表示するか
data-sharing-enable シェアボタンを表示するか
data-start 再生開始位置を指定(秒単位)
data-ui-highlight ハイライトの色
data-ui-logo Dailymotionのロゴを表示するか
data-info 動画のタイトルを表示するか
data-param-* Dailymotionの詳細設定
dock 最小化するか
fallback フォールバック。対象の要素にブラウザが未対応や読み込みに失敗などをユーザに伝えるもの
heights メディア式に基づいた要素の縦サイズ
layout レイアウト
media メディア属性
noloading 進捗インジケータ(グルグル回るアイコンみたいなやつ)をOFF
on イベントの実行用
placeholder 親要素のプレスホルダー(アニメーションや画像などで読み込まれる前に表示されるやつ)
sizes メディア式に基づいた要素の横サイズ

レイアウト

レイアウト名 説明
fill 利用可能なスペースを埋めるよう自動的にサイズ調整
fixed 指定した横幅と高さで固定
fixed-height 指定した高さで固定。横幅は自動的にサイズ調整
flex-item 親要素や周りの要素に応じて自動的にサイズ調整
responsive 画面サイズに応じて自動的にサイズ調整

基本的な使い方

<amp-dailymotion
  data-videoid="x2m8jpp"
  width="500"
  height="281">
</amp-dailymotion>

layoutを指定

<amp-dailymotion
  layout="responsive"
  data-videoid="jx2m8pp"
  width="500"
  height="281">
</amp-dailymotion>

属性設定

<amp-dailymotion
  data-videoid="jx2m8pp"
  width="500"
  height="281"
  layout="responsive"
  data-mute="true"
  data-endscreen-enable="false"
  data-sharing-enable="true"
  data-start="42"
  data-ui-highlight="ef0122"
  data-ui-logo="false"
  data-info="true">
</amp-dailymotion>

ハイライトの色を設定

<amp-dailymotion
  data-ui-highlight="fff"
  data-videoid="jx2m8pp"
  width="500"
  height="281">
</amp-dailymotion>

Delight Playerの動画プレーヤーを表示

説明

Delight Playerの動画プレーヤーを表示

使い方

<amp-delight-player 属性>
</amp-delight-player>

必要なスクリプト

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

属性

属性名 説明
data-content-id(必須) ビデオコンテンツID
autoplay 自動再生
dock 最小化
fallback フォールバック。対象の要素にブラウザが未対応や読み込みに失敗などをユーザに伝えるもの
heights メディア式に基づいた要素の縦サイズ
layout レイアウト
media メディア属性
noloading 進捗インジケータ(グルグル回るアイコンみたいなやつ)をOFF
on イベントの実行用
placeholder 親要素のプレスホルダー(アニメーションや画像などで読み込まれる前に表示されるやつ)
sizes メディア式に基づいた要素の横サイズ
width 横幅
height 高さ

レイアウト

レイアウト名 説明
fill 利用可能なスペースを埋めるよう自動的にサイズ調整
fixed 指定した横幅と高さで固定
fixed-height 指定した高さで固定。横幅は自動的にサイズ調整
flex-item 親要素や周りの要素に応じて自動的にサイズ調整
nodisplay 要素が非表示
responsive 画面サイズに応じて自動的にサイズ調整

基本的な使い方

<amp-delight-player
  data-content-id="-LJmX7wyfNmRe5LHw7Hy"
  layout="responsive"
  width="16"
  height="9">
</amp-delight-player>

Embedlyカードを表示

説明

Embedly カードを表示

使い方

<amp-embedly-card 属性>
</amp-embedly-card>

必要なスクリプト

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

属性

属性名 説明
data-url(必須) 埋め込み情報を取得するURL
data-card-via カードのビアコンテンツ
data-card-theme テーマ
data-card-embed ビデオまたはリッチメディアへのURL
data-card-image 画像のURL
data-card-controls 共有アイコンを有効にするか
data-card-align カードの表示方法
data-card-recommend 埋め込みの推奨を有効にするか
fallback フォールバック。対象の要素にブラウザが未対応や読み込みに失敗などをユーザに伝えるもの
heights メディア式に基づいた要素の縦サイズ
layout レイアウト
media メディア属性
noloading 進捗インジケータ(グルグル回るアイコンみたいなやつ)をOFF
on イベントの実行用
placeholder 親要素のプレスホルダー(アニメーションや画像などで読み込まれる前に表示されるやつ)
sizes メディア式に基づいた要素の横サイズ
width 横幅
height 高さ

レイアウト

レイアウト名 説明
responsive 画面サイズに応じて自動的にサイズ調整

基本的な使い方

<amp-embedly-card
  data-url="https://www.youtube.com/watch?v=lBTCB7yLs8Y"
  layout="responsive"
  width="100"
  height="50">
</amp-embedly-card>

テーマを指定

<amp-embedly-card
  data-url="https://twitter.com/AMPhtml/status/986750295077040128"
  layout="responsive"
  width="150"
  height="80"
  data-card-theme="dark"
  data-card-controls="0">
</amp-embedly-card>

Facebookのコメントを表示

説明

Facebookのコメントを表示

使い方

<amp-facebook-comments 属性>
</amp-facebook-comments>

必要なスクリプト

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

属性

属性名 説明
data-href(必須) コメントページのURL
data-locale ロケール
data-numposts 表示するコメントの数
data-order-by コメントを表示するときに使用する順序
data-colorscheme カラー
fallback フォールバック。対象の要素にブラウザが未対応や読み込みに失敗などをユーザに伝えるもの
heights メディア式に基づいた要素の縦サイズ
layout レイアウト
media メディア属性
noloading 進捗インジケータ(グルグル回るアイコンみたいなやつ)をOFF
on イベントの実行用
placeholder 親要素のプレスホルダー(アニメーションや画像などで読み込まれる前に表示されるやつ)
sizes メディア式に基づいた要素の横サイズ
width 横幅
height 高さ

レイアウト

レイアウト名 説明
fill 利用可能なスペースを埋めるよう自動的にサイズ調整
fixed 指定した横幅と高さで固定
fixed-height 指定した高さで固定。横幅は自動的にサイズ調整
flex-item 親要素や周りの要素に応じて自動的にサイズ調整
nodisplay 要素が非表示
responsive 画面サイズに応じて自動的にサイズ調整

基本的な使い方

<amp-facebook-comments
  width=486
  height=657
  layout="responsive"
  data-href="http://www.directlyrics.com/adele-25-complete-album-lyrics-news.html">
</amp-facebook>

time

<amp-facebook-comments width=552 height=310
  layout="responsive"
  data-numposts="5"
  data-order-by="time"
  data-href="https://developers.facebook.com/docs/plugins/comments">
</amp-facebook-comments>

social

<amp-facebook-comments width=552 height=310
  layout="responsive"
  data-numposts="5"
  data-order-by="social"
  data-href="https://developers.facebook.com/docs/plugins/comments">
</amp-facebook-comments>

Facebookのいいねボタンを表示

説明

Facebookのいいねボタンを表示

使い方

<amp-facebook-like 属性>
</amp-facebook-like>

必要なスクリプト

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

属性

属性名 説明
data-href(必須) いいねされるページのURL
data-locale ロケール
data-action ボタンに表示するアクション
data-colorscheme 外側のテキストの色
data-kd_site 13歳未満の子供に向けコンテンツかどうか
data-layout レイアウト
data-ref 参照を追跡するためのラベル
data-share いいねボタンの横に共有ボタンを含めるか
data-show_faces ボタンの下にプロファイル写真を表示するかどうか
data-size ボタンのサイズ
fallback フォールバック。対象の要素にブラウザが未対応や読み込みに失敗などをユーザに伝えるもの
heights メディア式に基づいた要素の縦サイズ
layout レイアウト
media メディア属性
noloading 進捗インジケータ(グルグル回るアイコンみたいなやつ)をOFF
on イベントの実行用
placeholder 親要素のプレスホルダー(アニメーションや画像などで読み込まれる前に表示されるやつ)
sizes メディア式に基づいた要素の横サイズ
width 横幅
height 高さ

レイアウト

レイアウト名 説明
fill 利用可能なスペースを埋めるよう自動的にサイズ調整
fixed 指定した横幅と高さで固定
fixed-height 指定した高さで固定。横幅は自動的にサイズ調整
flex-item 親要素や周りの要素に応じて自動的にサイズ調整
nodisplay 要素が非表示
responsive 画面サイズに応じて自動的にサイズ調整

基本的な使い方

<amp-facebook-like width=90 height=20
  layout="fixed"
  data-layout="button_count"
  data-href="https://www.facebook.com/testesmegadivertidos/">
</amp-facebook-like>

ロケール(data-locale)

<amp-facebook-like width=90 height=20
  layout="fixed"
  data-layout="button_count"
  data-href="https://www.facebook.com/testesmegadivertidos/"
  data-locale="fr_FR">
</amp-facebook-like>

ボタンの下にプロファイル写真を表示する(data-show-faces)

<amp-facebook-like width=225 height=80
  layout="fixed"
  title="Facebook Like"
  data-layout="standard"
  data-size="large"
  data-show-faces="true"
  data-href="https://www.facebook.com/GoogleBrasil">
</amp-facebook-like>

Facebookページを表示

説明

Facebookページを表示

使い方

<amp-facebook-page 属性>
</amp-facebook-page>

必要なスクリプト

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

属性

属性名 説明
data-href(必須) FacebookページのURL
data-locale ロケール
data-tabs レンダリングするタブを指定
data-hide-cover ヘッダーのカバー写真を非表示
data-show-facepile 好きな友達のプロフィール写真を表示
data-hide-cta アクションボタンのカスタム呼び出しを非表示
data-small-header 小さいヘッダー
fallback フォールバック。対象の要素にブラウザが未対応や読み込みに失敗などをユーザに伝えるもの
heights メディア式に基づいた要素の縦サイズ
layout レイアウト
media メディア属性
noloading 進捗インジケータ(グルグル回るアイコンみたいなやつ)をOFF
on イベントの実行用
placeholder 親要素のプレスホルダー(アニメーションや画像などで読み込まれる前に表示されるやつ)
sizes メディア式に基づいた要素の横サイズ
width 横幅
height 高さ

レイアウト

レイアウト名 説明
fill 利用可能なスペースを埋めるよう自動的にサイズ調整
fixed 指定した横幅と高さで固定
fixed-height 指定した高さで固定。横幅は自動的にサイズ調整
flex-item 親要素や周りの要素に応じて自動的にサイズ調整
nodisplay 要素が非表示
responsive 画面サイズに応じて自動的にサイズ調整

基本的な使い方

<amp-facebook-page width=552 height=310
  layout="responsive"
  data-tabs="timeline"
  data-href="https://www.facebook.com/barackobama/">
</amp-facebook-page>

好きな友達のプロフィール写真を表示(data-show-facepile)

<amp-facebook-page width="300" height="300"
  layout="fixed"
  data-adapt-container-width="true"
  data-show-facepile="true"
  data-href="https://www.facebook.com/itsdougthepug">
</amp-facebook-page>

Facebookの投稿や動画を表示

説明

Facebookの投稿や動画を表示

使い方

<amp-facebook 属性>
</amp-facebook>

必要なスクリプト

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

属性

属性名 説明 デフォルト値
data-href(必須) コンテンツのURL  
height(必須) 高さ  
width(必須) 横幅  
data-embed-as コンテンツの種類。投稿(post)、動画(video)、コメント(comment) post
data-include-comment-parent コメントの返信を表示するか false
data-align-center 中央揃えにするか false
data-locale ロケール  
fallback フォールバック。対象の要素にブラウザが未対応や読み込みに失敗などをユーザに伝えるもの  
heights メディア式に基づいた要素の縦サイズ  
layout レイアウト  
media メディア属性  
noloading 進捗インジケータ(グルグル回るアイコンみたいなやつ)をOFF  
on イベントの実行用  
placeholder 親要素のプレスホルダー(アニメーションや画像などで読み込まれる前に表示されるやつ)  
sizes メディア式に基づいた要素の横サイズ  
width 横幅  
height 高さ  

レイアウト

レイアウト名 説明
fill 利用可能なスペースを埋めるよう自動的にサイズ調整
fixed 指定した横幅と高さで固定
fixed-height 指定した高さで固定。横幅は自動的にサイズ調整
flex-item 親要素や周りの要素に応じて自動的にサイズ調整
nodisplay 要素が非表示
responsive 画面サイズに応じて自動的にサイズ調整

基本的な使い方

<amp-facebook
  width=486
  height=657
  layout="responsive"
  data-href="https://www.facebook.com/zuck/posts/10102593740125791">
</amp-facebook>

ロケール(data-locale)

<amp-facebook
  width=486
  height=657
  layout="responsive"
  data-href="https://www.facebook.com/zuck/posts/10102593740125791"
  data-locale="fr_FR">
</amp-facebook>

動画(video)

<amp-facebook
  width=552
  height=574
  layout="responsive"
  data-embed-as="video"
  data-href="https://www.facebook.com/zuck/videos/10102509264909801/">
</amp-facebook>

コメント(comment)

<amp-facebook
  width=552
  height=200
  layout="responsive"
  data-embed-as="comment"
  data-include-parent="true"
  data-href="https://www.facebook.com/zuck/posts/10102735452532991?comment_id=717538375088203">
</amp-facebook>

中央揃え(data-align-center)

<amp-facebook
  width=552
  height=350
  layout="responsive"
  data-href="https://www.facebook.com/notes/facebook-engineering/under-the-hood-the-javascript-sdk-truly-asynchronous-loading/10151176218703920/"
  data-align-center="true">
</amp-facebook>

Gfycat Videoの動画プレーヤーを表示

説明

Gfycat Videoの動画プレーヤーを表示

使い方

<amp-gfycat 属性>
</amp-gfycat>

必要なスクリプト

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

属性

属性名 説明
data-gfyid(必須) GfycatID
height(必須) 高さ
width(必須) 横幅
noautoplay 自動再生しない
fallback フォールバック。対象の要素にブラウザが未対応や読み込みに失敗などをユーザに伝えるもの
heights メディア式に基づいた要素の縦サイズ
layout レイアウト
media メディア属性
noloading 進捗インジケータ(グルグル回るアイコンみたいなやつ)をOFF
on イベントの実行用
placeholder 親要素のプレスホルダー(アニメーションや画像などで読み込まれる前に表示されるやつ)
sizes メディア式に基づいた要素の横サイズ

レイアウト

レイアウト名 説明
fill 利用可能なスペースを埋めるよう自動的にサイズ調整
fixed 指定した横幅と高さで固定
fixed-height 指定した高さで固定。横幅は自動的にサイズ調整
flex-item 親要素や周りの要素に応じて自動的にサイズ調整
responsive 画面サイズに応じて自動的にサイズ調整

基本的な使い方

<amp-gfycat
  data-gfyid="TautWhoppingCougar"
  width="640"
  height="360"
  layout="responsive">
</amp-gfycat>

自動再生しない(noautoplay)

<amp-gfycat
  data-gfyid="LeanMediocreBeardeddragon"
  width="640"
  height="360"
  noautoplay>
</amp-gfycat>

iframeを作成しGitHubからGistを表示

説明

iframeを作成しGitHubからGistを表示

使い方

<amp-gist 属性>
</amp-gist>

必要なスクリプト

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

属性

属性名 説明
data-gfyid(必須) gist ID
layout(必須) レイアウト
height(必須) 高さ
data-file データファイル
fallback フォールバック。対象の要素にブラウザが未対応や読み込みに失敗などをユーザに伝えるもの
heights メディア式に基づいた要素の縦サイズ
layout レイアウト
media メディア属性
noloading 進捗インジケータ(グルグル回るアイコンみたいなやつ)をOFF
on イベントの実行用
placeholder 親要素のプレスホルダー(アニメーションや画像などで読み込まれる前に表示されるやつ)
sizes メディア式に基づいた要素の横サイズ
width 横幅
height 高さ

レイアウト

レイアウト名 説明
fixed-height 指定した高さで固定。横幅は自動的にサイズ調整

基本的な使い方

<amp-gist
  layout="fixed-height"
  height="241"
  data-gistid="b9bb35bc68df68259af94430f012425f">
</amp-gist>

データファイル(data-file)

<amp-gist
  data-file="hi.c"
  layout="fixed-height"
  height="197"
  data-gistid="a19e811dcd7df10c4da0931641538497">
</amp-gist>

Googleドライブでサポートされているドキュメントファイルを表示

説明

Googleドライブでサポートされているドキュメントファイルを表示

使い方

<amp-google-document-embed 属性>
</amp-google-document-embed>

必要なスクリプト

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

属性

属性名 説明
src ドキュメントの URL
fallback フォールバック。対象の要素にブラウザが未対応や読み込みに失敗などをユーザに伝えるもの
heights メディア式に基づいた要素の縦サイズ
layout レイアウト
media メディア属性
noloading 進捗インジケータ(グルグル回るアイコンみたいなやつ)をOFF
on イベントの実行用
placeholder 親要素のプレスホルダー(アニメーションや画像などで読み込まれる前に表示されるやつ)
sizes メディア式に基づいた要素の横サイズ
width 横幅
height 高さ

レイアウト

レイアウト名 説明
fill 利用可能なスペースを埋めるよう自動的にサイズ調整
fixed 指定した横幅と高さで固定
fixed-height 指定した高さで固定。横幅は自動的にサイズ調整
flex-item 親要素や周りの要素に応じて自動的にサイズ調整
intrinsic 指定したアスペクト比に自動的にサイズ調整
nodisplay 要素が非表示
responsive 画面サイズに応じて自動的にサイズ調整

基本的な使い方

<amp-google-document-embed
  src="https://www.example.com/document.pdf"
  width="800"
  height="600">
</amp-google-document-embed>

layout

<amp-google-document-embed
  layout="responsive"
  src="https://www.example.com/document.pdf"
  width="800"
  height="600">
</amp-google-document-embed>

Huluの動画を表示

説明

Huluの動画を表示

使い方

<amp-hulu 属性>
</amp-hulu>

必要なスクリプト

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

属性

属性名 説明
data-eid ビデオの ID
fallback フォールバック。対象の要素にブラウザが未対応や読み込みに失敗などをユーザに伝えるもの
heights メディア式に基づいた要素の縦サイズ
layout レイアウト
media メディア属性
noloading 進捗インジケータ(グルグル回るアイコンみたいなやつ)をOFF
on イベントの実行用
placeholder 親要素のプレスホルダー(アニメーションや画像などで読み込まれる前に表示されるやつ)
sizes メディア式に基づいた要素の横サイズ
width 横幅
height 高さ

レイアウト

レイアウト名 説明
fill 利用可能なスペースを埋めるよう自動的にサイズ調整
fixed 指定した横幅と高さで固定
fixed-height 指定した高さで固定。横幅は自動的にサイズ調整
flex-item 親要素や周りの要素に応じて自動的にサイズ調整
responsive 画面サイズに応じて自動的にサイズ調整

基本的な使い方

<amp-hulu
  layout="responsive"
  width="412"
  height="213"
  data-eid="4Dk5F2PYTtrgciuvloH3UA">
</amp-hulu>

IMA SDKに統合されているインストリーム動画広告用の動画プレーヤーを表示

説明

IMA SDKに統合されているインストリーム動画広告用の動画プレーヤーを表示

使い方

<amp-ima-video 属性>
</amp-ima-video>

必要なスクリプト

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

属性

属性名 説明
data-tag(必須) VAST広告ドキュメントのURL
data-src ビデオコンテンツの RL
data-crossorigin クロスホストを許可するか
data-poster ビデオの再生が開始される前に表示されるフレームの画像
data-delay-ad-request 広告リクエストを遅延
data-ad-label 広告の再生時に広告を表示するために使用
dock 最小化するか
fallback フォールバック。対象の要素にブラウザが未対応や読み込みに失敗などをユーザに伝えるもの
heights メディア式に基づいた要素の縦サイズ
layout レイアウト
media メディア属性
noloading 進捗インジケータ(グルグル回るアイコンみたいなやつ)をOFF
on イベントの実行用
placeholder 親要素のプレスホルダー(アニメーションや画像などで読み込まれる前に表示されるやつ)
sizes メディア式に基づいた要素の横サイズ
width 横幅
height 高さ

レイアウト

レイアウト名 説明
fill 利用可能なスペースを埋めるよう自動的にサイズ調整
fixed 指定した横幅と高さで固定
fixed-height 指定した高さで固定。横幅は自動的にサイズ調整
nodisplay 要素が非表示
responsive 画面サイズに応じて自動的にサイズ調整

基本的な使い方

<amp-ima-video
  width=640
  height=360
  layout="responsive"
  autoplay
  data-src="https://s0.2mdn.net/4253510/google_ddm_animation_480P.mp4"
  data-tag="https://pubads.g.doubleclick.net/gampad/ads?sz=640x480&iu=/124319096/external/ad_rule_samples&ciu_szs=300x250&ad_rule=1&impl=s&gdfp_req=1&env=vp&output=vmap&unviewed_position_start=1&cust_params=deployment%3Ddevsite%26sample_ar%3Dpremidpost&cmsid=496&vid=short_onecue&correlator="
  data-poster="path/to/poster.png">
</amp-ima-video>

Imgurの投稿を表示

説明

Imgurの投稿を表示

使い方

<amp-imgur 属性>
</amp-imgur>

必要なスクリプト

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

属性

属性名 説明
data-imgur-id(必須) Imgur投稿ID
width(必須) 横幅
height(必須) 高さ
fallback フォールバック。対象の要素にブラウザが未対応や読み込みに失敗などをユーザに伝えるもの
heights メディア式に基づいた要素の縦サイズ
layout レイアウト
media メディア属性
noloading 進捗インジケータ(グルグル回るアイコンみたいなやつ)をOFF
on イベントの実行用
placeholder 親要素のプレスホルダー(アニメーションや画像などで読み込まれる前に表示されるやつ)
sizes メディア式に基づいた要素の横サイズ

レイアウト

レイアウト名 説明
fill 利用可能なスペースを埋めるよう自動的にサイズ調整
fixed 指定した横幅と高さで固定
fixed-height 指定した高さで固定。横幅は自動的にサイズ調整
flex-item 親要素や周りの要素に応じて自動的にサイズ調整
nodisplay 要素が非表示
responsive 画面サイズに応じて自動的にサイズ調整

基本的な使い方

<amp-imgur
  data-imgur-id="2CnX7"
  height="480"
  width="640"
  layout="responsive">
</amp-imgur>

Instagramの投稿を表示

説明

Instagramの投稿を表示

使い方

<amp-instagram 属性>
</amp-instagram>

必要なスクリプト

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

属性

属性名 説明
data-shortcode(必須) コンテンツのID
height(必須) 高さ
width(必須) 横幅
data-captioned Instagramのキャプションを含める
fallback フォールバック。対象の要素にブラウザが未対応や読み込みに失敗などをユーザに伝えるもの
heights メディア式に基づいた要素の縦サイズ
layout レイアウト
media メディア属性
noloading 進捗インジケータ(グルグル回るアイコンみたいなやつ)をOFF
on イベントの実行用
placeholder 親要素のプレスホルダー(アニメーションや画像などで読み込まれる前に表示されるやつ)
sizes メディア式に基づいた要素の横サイズ

レイアウト

レイアウト名 説明
fill 利用可能なスペースを埋めるよう自動的にサイズ調整
fixed 指定した横幅と高さで固定
fixed-height 指定した高さで固定。横幅は自動的にサイズ調整
flex-item 親要素や周りの要素に応じて自動的にサイズ調整
nodisplay 要素が非表示
responsive 画面サイズに応じて自動的にサイズ調整

基本的な使い方

<amp-instagram
  data-shortcode="fBwFP"
  width="381"
  height="381"
  layout="responsive">
</amp-instagram>

data-captioned

<amp-instagram
  data-captioned
  data-shortcode="BR3g5NDBvBu"
  data-default-framing
  width="500"
  height="500"
  layout="responsive">
  <div overflow>Show Caption</div>
</amp-instagram>

ServiceWorkerを埋め込む

説明

ServiceWorkerを埋め込む

使い方

<amp-install-serviceworker 属性>
</amp-install-serviceworker>

必要なスクリプト

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

属性

属性名 説明
src(必須) ServiceWorkerのURL
data-iframe-src インストールするHTMLドキュメントのURL
data-scope スコープ
layout レイアウト
data-no-service-worker-fallback-url-match 書き換えられるURLに一致する正規表現
data-no-service-worker-fallback-shell-url 書き換えるために使用するシェルのURL
fallback フォールバック。対象の要素にブラウザが未対応や読み込みに失敗などをユーザに伝えるもの
heights メディア式に基づいた要素の縦サイズ
media メディア属性
noloading 進捗インジケータ(グルグル回るアイコンみたいなやつ)をOFF
on イベントの実行用
placeholder 親要素のプレスホルダー(アニメーションや画像などで読み込まれる前に表示されるやつ)
sizes メディア式に基づいた要素の横サイズ
width 横幅
height 高さ

基本的な使い方

<amp-install-serviceworker
  src="https://www.your-domain.com/serviceworker.js"
  data-iframe-src="https://www.your-domain.com/install-serviceworker.html"
  layout="nodisplay">
</amp-install-serviceworker>

Izleseneの動画を表示

説明

Izleseneの動画を表示

使い方

<amp-izlesene 属性>
</amp-izlesene>

必要なスクリプト

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

属性

属性名 説明
data-videoid(必須) IzleseneビデオID
data-param-showrel 関連コンテンツを表示するかどうか
data-param-showreplay コンテンツの最後に再生ボタンを表示するかどうか
fallback フォールバック。対象の要素にブラウザが未対応や読み込みに失敗などをユーザに伝えるもの
heights メディア式に基づいた要素の縦サイズ
layout レイアウト
media メディア属性
noloading 進捗インジケータ(グルグル回るアイコンみたいなやつ)をOFF
on イベントの実行用
placeholder 親要素のプレスホルダー(アニメーションや画像などで読み込まれる前に表示されるやつ)
sizes メディア式に基づいた要素の横サイズ
width 横幅
height 高さ

レイアウト

レイアウト名 説明
fill 利用可能なスペースを埋めるよう自動的にサイズ調整
fixed 指定した横幅と高さで固定
fixed-height 指定した高さで固定。横幅は自動的にサイズ調整
flex-item 親要素や周りの要素に応じて自動的にサイズ調整
responsive 画面サイズに応じて自動的にサイズ調整

基本的な使い方

<amp-izlesene
  data-videoid="7221390"
  width="480"
  height="270">
</amp-izlesene>

レイアウト

<amp-izlesene
  layout="responsive"
  data-videoid="7221390"
  width="480"
  height="270"></amp-izlesene>

JW Playerの動画プレーヤーを表示

説明

JW Playerの動画プレーヤーを表示

使い方

<amp-jwplayer 属性>
</amp-jwplayer>

必要なスクリプト

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

属性

属性名 説明
data-player-id(必須) JWプラットフォームプレーヤーID
data-media-id(必須) JWプラットフォームのメディアID
data-playlist-id(必須) JW PlatformプレイリストID
data-content-search プレイリストのタイプ
data-content-backfill 検索またはコンテキストプレイリストが常に結果を返す
fallback フォールバック。対象の要素にブラウザが未対応や読み込みに失敗などをユーザに伝えるもの
heights メディア式に基づいた要素の縦サイズ
layout レイアウト
media メディア属性
noloading 進捗インジケータ(グルグル回るアイコンみたいなやつ)をOFF
on イベントの実行用
placeholder 親要素のプレスホルダー(アニメーションや画像などで読み込まれる前に表示されるやつ)
sizes メディア式に基づいた要素の横サイズ
width 横幅
height 高さ

レイアウト

レイアウト名 説明
fill 利用可能なスペースを埋めるよう自動的にサイズ調整
fixed 指定した横幅と高さで固定
fixed-height 指定した高さで固定。横幅は自動的にサイズ調整
flex-item 親要素や周りの要素に応じて自動的にサイズ調整
nodisplay 要素が非表示
responsive 画面サイズに応じて自動的にサイズ調整

基本的な使い方

<amp-jwplayer
  data-player-id="BjcwyK37"
  data-media-id="BZ6tc0gy"
  layout="responsive"
  width="160" height="90">
</amp-jwplayer>

data-content-searchとdata-content-backfill

<amp-jwplayer
  data-content-search="__CONTEXTUAL__"
  data-content-backfill=true
  data-player-id="BjcwyK37"
  data-media-id="BZ6tc0gy"
  layout="responsive" width="160" height="90">
</amp-jwplayer>

Kalturaの動画プレーヤーを表示

説明

Kalturaの動画プレーヤーを表示

使い方

<amp-kaltura-player 属性>
</amp-kaltura-player>

必要なスクリプト

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

属性

属性名 説明
data-partner(必須) KalturaパートナーID
data-uiconf(必須) KalturaプレイヤーID
data-entryid(必須) KalturaエントリID
data-param-* Kalturaの詳細設定
fallback フォールバック。対象の要素にブラウザが未対応や読み込みに失敗などをユーザに伝えるもの
heights メディア式に基づいた要素の縦サイズ
layout レイアウト
media メディア属性
noloading 進捗インジケータ(グルグル回るアイコンみたいなやつ)をOFF
on イベントの実行用
placeholder 親要素のプレスホルダー(アニメーションや画像などで読み込まれる前に表示されるやつ)
sizes メディア式に基づいた要素の横サイズ
width 横幅
height 高さ

レイアウト

レイアウト名 説明
fill 利用可能なスペースを埋めるよう自動的にサイズ調整
fixed 指定した横幅と高さで固定
fixed-height 指定した高さで固定。横幅は自動的にサイズ調整
flex-item 親要素や周りの要素に応じて自動的にサイズ調整
nodisplay 要素が非表示
responsive 画面サイズに応じて自動的にサイズ調整

基本的な使い方

<amp-kaltura-player
  data-uiconf="33502051"
  data-partner="1281471"
  data-entryid="1_3ts1ms9c"
  data-param-streamerType = "auto"
  layout="responsive" width="480" height="270">
</amp-kaltura-player>

Megaphone.fmポッドキャストエピソードまたはプレイリストを表示

説明

Megaphone.fmポッドキャストエピソードまたはプレイリストを表示

使い方

<amp-megaphone 属性>
</amp-megaphone>

必要なスクリプト

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

属性

属性名 説明
data-episode Megaphone.fm ID
data-playlist プレイリストのMegaphone.fm ID
data-start エピソードを開始する時間(秒)
data-episodes 表示するエピソードの数
data-tile モード
data-light テーマ
data-sharing 共有ボタン
width 横幅
height 高さ
fallback フォールバック。対象の要素にブラウザが未対応や読み込みに失敗などをユーザに伝えるもの
heights メディア式に基づいた要素の縦サイズ
layout レイアウト
media メディア属性
noloading 進捗インジケータ(グルグル回るアイコンみたいなやつ)をOFF
on イベントの実行用
placeholder 親要素のプレスホルダー(アニメーションや画像などで読み込まれる前に表示されるやつ)
sizes メディア式に基づいた要素の横サイズ

レイアウト

レイアウト名 説明
fixed 指定した横幅と高さで固定
fixed-height 指定した高さで固定。横幅は自動的にサイズ調整

基本的な使い方

<amp-megaphone
  height="166"
  layout="fixed-height"
  data-episode="OSC7749686951"
  data-light>
</amp-megaphone>

エピソードを開始する時間(data-start)

<amp-megaphone
  data-start="56"
  height=166
  data-episode="OSC7749686951"
  layout="fixed-height">
</amp-megaphone>

ミニッツメディアプレーヤーを表示

説明

ミニッツメディアプレーヤーを表示

使い方

<amp-minute-media-player 属性>
</amp-minute-media-player>

必要なスクリプト

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

属性

属性名 説明
data-content-type Minute Mediaプレーヤーのタイプ
data-content-id Minute MediaプレーヤーID
data-scanned-element-type 特性
data-scanned-element 選択されたスキャン要素タイプ
data-tags タグ
data-minimum-date-factor 最後の日数
data-scoped-keywords タグ
autoplay 自動再生
dock 最小化
fallback フォールバック。対象の要素にブラウザが未対応や読み込みに失敗などをユーザに伝えるもの
heights メディア式に基づいた要素の縦サイズ
layout レイアウト
media メディア属性
noloading 進捗インジケータ(グルグル回るアイコンみたいなやつ)をOFF
on イベントの実行用
placeholder 親要素のプレスホルダー(アニメーションや画像などで読み込まれる前に表示されるやつ)
sizes メディア式に基づいた要素の横サイズ
width 横幅
height 高さ

レイアウト

レイアウト名 説明
fill 利用可能なスペースを埋めるよう自動的にサイズ調整
fixed 指定した横幅と高さで固定
fixed-height 指定した高さで固定。横幅は自動的にサイズ調整
flex-item 親要素や周りの要素に応じて自動的にサイズ調整
responsive 画面サイズに応じて自動的にサイズ調整

基本的な使い方

<amp-minute-media-player
  data-content-type="curated"
  data-content-id="fSkmeWKF"
  width="500"
  height="334"
  layout="responsive"
  autoplay>
</amp-minute-media-player>

Mow Playerを表示

説明

Mow Playerを表示

使い方

<amp-mowplayer 属性>
</amp-mowplayer>

必要なスクリプト

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

属性

属性名 説明
data-mediaid メディアID
fallback フォールバック。対象の要素にブラウザが未対応や読み込みに失敗などをユーザに伝えるもの
heights メディア式に基づいた要素の縦サイズ
layout レイアウト
media メディア属性
noloading 進捗インジケータ(グルグル回るアイコンみたいなやつ)をOFF
on イベントの実行用
placeholder 親要素のプレスホルダー(アニメーションや画像などで読み込まれる前に表示されるやつ)
sizes メディア式に基づいた要素の横サイズ
width 横幅
height 高さ

レイアウト

レイアウト名 説明
fill 利用可能なスペースを埋めるよう自動的にサイズ調整
fixed 指定した横幅と高さで固定
fixed-height 指定した高さで固定。横幅は自動的にサイズ調整
flex-item 親要素や周りの要素に応じて自動的にサイズ調整
nodisplay 要素が非表示
responsive 画面サイズに応じて自動的にサイズ調整

基本的な使い方

<amp-mowplayer
    data-mediaid="v-myfwarfx4tb"
    layout="responsive"
    width="16"
    height="9">
  </amp-mowplayer>

nexxOMNIAプラットフォームからのメディアストリームを表示

説明

nexxOMNIAプラットフォームからのメディアストリームを表示

使い方

<amp-nexxtv-player 属性>
</amp-nexxtv-player>

必要なスクリプト

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

属性

属性名 説明
data-mediaid(必須) 再生するメディアのID
data-client(必須) ドメインID
data-streamtype メディアストリーミングタイプ
data-seek-to メディアの開始点
data-mode データモード
data-origin ドメインメディア
data-disable-ads 広告を有効になっているか
data-streaming-filter ストリーミングフィルター
fallback フォールバック。対象の要素にブラウザが未対応や読み込みに失敗などをユーザに伝えるもの
heights メディア式に基づいた要素の縦サイズ
layout レイアウト
media メディア属性
noloading 進捗インジケータ(グルグル回るアイコンみたいなやつ)をOFF
on イベントの実行用
placeholder 親要素のプレスホルダー(アニメーションや画像などで読み込まれる前に表示されるやつ)
sizes メディア式に基づいた要素の横サイズ
width 横幅
height 高さ

レイアウト

レイアウト名 説明
fill 利用可能なスペースを埋めるよう自動的にサイズ調整
fixed 指定した横幅と高さで固定
fixed-height 指定した高さで固定。横幅は自動的にサイズ調整
flex-item 親要素や周りの要素に応じて自動的にサイズ調整
nodisplay 要素が非表示
responsive 画面サイズに応じて自動的にサイズ調整

基本的な使い方

<amp-nexxtv-player
  data-mediaid="71QQG852413DU7J"
  data-client="761"
  data-streamtype="video"
  data-seek-to="2"
  data-mode="static"
  data-origin="https://embed.nexx.cloud/"
  data-disable-ads="1"
  data-streaming-filter="nxp-bitrate-2500"
  layout="responsive"
  width="480"
  height="270">
</amp-nexxtv-player>

AOL O2の動画プレーヤーを表示

説明

AOL O2 の動画プレーヤーを表示

使い方

<amp-o2-player 属性>
</amp-o2-player>

必要なスクリプト

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

属性

属性名 説明
data-bcid(必須) Buyer Company ID
data-pid(必須) プレーヤー ID
data-bid(必須) プレイリスト ID
data-macros macros
data-vid 動画 ID
fallback フォールバック。対象の要素にブラウザが未対応や読み込みに失敗などをユーザに伝えるもの
heights メディア式に基づいた要素の縦サイズ
layout レイアウト
media メディア属性
noloading 進捗インジケータ(グルグル回るアイコンみたいなやつ)をOFF
on イベントの実行用
placeholder 親要素のプレスホルダー(アニメーションや画像などで読み込まれる前に表示されるやつ)
sizes メディア式に基づいた要素の横サイズ
width 横幅
height 高さ

レイアウト

レイアウト名 説明
fill 利用可能なスペースを埋めるよう自動的にサイズ調整
fixed 指定した横幅と高さで固定
fixed-height 指定した高さで固定。横幅は自動的にサイズ調整
flex-item 親要素や周りの要素に応じて自動的にサイズ調整
nodisplay 要素が非表示
responsive 画面サイズに応じて自動的にサイズ調整

基本的な使い方

<amp-o2-player
  data-pid="573d9bf1e4b02a3388f42c36"
  data-bcid="50d595ec0364e95588c77bd2"
  layout="responsive" width="480" height="270">
</amp-o2-player>

data-macros

<amp-o2-player
  data-pid="573d9bf1e4b02a3388f42c36"
  data-bcid="50d595ec0364e95588c77bd2"
  data-bid="573d9bd3e4b00df34e4325ed"
  data-macros="m.playertype=HTML5"
  layout="responsive" width="480" height="270">
</amp-o2-player>

Ooyalaの動画プレーヤーを表示

説明

Ooyalaの動画プレーヤーを表示

使い方

<amp-ooyala-player 属性>
</amp-ooyala-player>

必要なスクリプト

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

属性

属性名 説明
data-embedcode(必須) Backlotのビデオ埋め込みコード
data-playerid(必須) プレーヤーID
data-pcode(必須) プロバイダーコード
data-playerversion プレイヤーのバージョン
data-config カスタム設定のURL
fallback フォールバック。対象の要素にブラウザが未対応や読み込みに失敗などをユーザに伝えるもの
heights メディア式に基づいた要素の縦サイズ
layout レイアウト
media メディア属性
noloading 進捗インジケータ(グルグル回るアイコンみたいなやつ)をOFF
on イベントの実行用
placeholder 親要素のプレスホルダー(アニメーションや画像などで読み込まれる前に表示されるやつ)
sizes メディア式に基づいた要素の横サイズ
width 横幅
height 高さ

レイアウト

レイアウト名 説明
fill 利用可能なスペースを埋めるよう自動的にサイズ調整
fixed 指定した横幅と高さで固定
fixed-height 指定した高さで固定。横幅は自動的にサイズ調整
responsive 画面サイズに応じて自動的にサイズ調整

基本的な使い方

<amp-ooyala-player
  data-embedcode="Vxc2k0MDE6Y_C7J5podo3UDxlFxGaZrQ"
  data-pcode="5zb2wxOlZcNCe_HVT3a6cawW298X"
  data-playerid="6440813504804d76ba35c8c787a4b33c"
  width="640"
  height="360">
</amp-ooyala-player>

Pinterestのコンテンツを表示

説明

Pinterestのコンテンツを表示

使い方

<amp-pinterest 属性>
</amp-pinterest>

必要なスクリプト

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

保存ボタンの属性

属性名 説明
height(必須) 高さ
width(必須) 横幅
data-do(必須) コンテンツの種類
data-url(必須) コンテンツのURL
data-media メディアファイルのURL
data-description メディアファイルの詳細
fallback フォールバック。対象の要素にブラウザが未対応や読み込みに失敗などをユーザに伝えるもの
heights メディア式に基づいた要素の縦サイズ
layout レイアウト
media メディア属性
noloading 進捗インジケータ(グルグル回るアイコンみたいなやつ)をOFF
on イベントの実行用
placeholder 親要素のプレスホルダー(アニメーションや画像などで読み込まれる前に表示されるやつ)
sizes メディア式に基づいた要素の横サイズ
width 横幅
height 高さ

フォローボタンの属性

属性名 説明
height(必須) 高さ
width(必須) 横幅
data-do(必須) コンテンツの種類
data-href フォロー対象のユーザーのURL
data-label フォローボタンのテキスト

ウィジェットの属性

属性名 説明
height(必須) 高さ
width(必須) 横幅
data-do(必須) コンテンツの種類
data-url(必須) コンテンツのURL
alt 代替テキスト

レイアウト

レイアウト名 説明
fill 利用可能なスペースを埋めるよう自動的にサイズ調整
fixed 指定した横幅と高さで固定
fixed-height 指定した高さで固定。横幅は自動的にサイズ調整
flex-item 親要素や周りの要素に応じて自動的にサイズ調整
nodisplay 要素が非表示
responsive 画面サイズに応じて自動的にサイズ調整

Save button

<amp-pinterest
  height="20"
  width="40"
  data-do="buttonPin"
  data-url="http://www.flickr.com/photos/kentbrew/6851755809/"
  data-media="http://farm8.staticflickr.com/7027/6851755809_df5b2051c9_z.jpg"
  data-description="Next stop: Pinterest">
</amp-pinterest>

Pin widget

<amp-pinterest
  width="245"
  height="330"
  data-do="embedPin"
  data-url="https://www.pinterest.com/pin/99360735500167749/">
</amp-pinterest>

Follow button

<amp-pinterest
  height="20"
  width="94"
  data-do="buttonFollow"
  data-href="https://www.pinterest.com/kentbrew/"
  data-label="Kent Brewster">
</amp-pinterest>

Playbuzzの動画プレーヤーを表示

説明

Playbuzzの動画プレーヤーを表示

使い方

<amp-playbuzz 属性>
</amp-playbuzz>

必要なスクリプト

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

属性

属性名 説明
src PlaybuzzアイテムのURL
data-item PlaybuzzアイテムのアイテムID
data-item-info 作成日、作成者名などのデータ情報を表示するかどうか
data-share-buttons 共有ボタンを表示するかどうか
data-comments ユーザーのコメントを表示するかどうか
fallback フォールバック。対象の要素にブラウザが未対応や読み込みに失敗などをユーザに伝えるもの
heights メディア式に基づいた要素の縦サイズ
layout レイアウト
media メディア属性
noloading 進捗インジケータ(グルグル回るアイコンみたいなやつ)をOFF
on イベントの実行用
placeholder 親要素のプレスホルダー(アニメーションや画像などで読み込まれる前に表示されるやつ)
sizes メディア式に基づいた要素の横サイズ
width 横幅
height 高さ

レイアウト

レイアウト名 説明
fixed-height 指定した高さで固定。横幅は自動的にサイズ調整
responsive 画面サイズに応じて自動的にサイズ調整

data-item

<amp-playbuzz
  data-item="a6aa5a14-8888-4618-b2e3-fe6a30d8c51b"
  layout="responsive"
  height="300"
  width="300"
  data-item-info="false"
  data-share-buttons="false"
  data-comments="false">
</amp-playbuzz>

src

<amp-playbuzz
  src="https://www.playbuzz.com/HistoryUK/10-classic-christmas-movies"
  layout="responsive"
  height="300"
  width="300"
  data-item-info="false"
  data-share-buttons="false"
  data-comments="false">
</amp-playbuzz>

Powrのプレーヤーを表示

説明

Powrのプレーヤーを表示

使い方

<amp-powr-player 属性>
</amp-powr-player>

必要なスクリプト

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

属性

属性名 説明
data-account(必須) アカウントID
data-player(必須) プレーヤーID
data-video ビデオID
data-terms 表示するページを説明するキーワード
data-referrer リファラー
data-param-* Powrへのパラメータ
autoplay 自動再生
fallback フォールバック。対象の要素にブラウザが未対応や読み込みに失敗などをユーザに伝えるもの
heights メディア式に基づいた要素の縦サイズ
layout レイアウト
media メディア属性
noloading 進捗インジケータ(グルグル回るアイコンみたいなやつ)をOFF
on イベントの実行用
placeholder 親要素のプレスホルダー(アニメーションや画像などで読み込まれる前に表示されるやつ)
sizes メディア式に基づいた要素の横サイズ
width 横幅
height 高さ

レイアウト

レイアウト名 説明
fill 利用可能なスペースを埋めるよう自動的にサイズ調整
fixed 指定した横幅と高さで固定
fixed-height 指定した高さで固定。横幅は自動的にサイズ調整
flex-item 親要素や周りの要素に応じて自動的にサイズ調整
nodisplay 要素が非表示
responsive 画面サイズに応じて自動的にサイズ調整

基本的な使い方

<amp-powr-player
  data-account="12345"
  data-player="12345"
  data-video="12345"
  layout="responsive"
  width="480"
  height="270">
</amp-powr-player>

Beachfront Reachの動画プレーヤーを表示

説明

Beachfront Reachの動画プレーヤーを表示

使い方

<amp-reach-player 属性>
</amp-reach-player>

必要なスクリプト

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

属性

属性名 説明
data-embed-id(必須) 埋め込みID
fallback フォールバック。対象の要素にブラウザが未対応や読み込みに失敗などをユーザに伝えるもの
heights メディア式に基づいた要素の縦サイズ
layout レイアウト
media メディア属性
noloading 進捗インジケータ(グルグル回るアイコンみたいなやつ)をOFF
on イベントの実行用
placeholder 親要素のプレスホルダー(アニメーションや画像などで読み込まれる前に表示されるやつ)
sizes メディア式に基づいた要素の横サイズ
width 横幅
height 高さ

レイアウト

レイアウト名 説明
fill 利用可能なスペースを埋めるよう自動的にサイズ調整
fixed 指定した横幅と高さで固定
fixed-height 指定した高さで固定。横幅は自動的にサイズ調整
flex-item 親要素や周りの要素に応じて自動的にサイズ調整
responsive 画面サイズに応じて自動的にサイズ調整

基本的な使い方

<amp-reach-player
  data-embed-id="default"
  layout="responsive"
  width="560"
  height="315">
</amp-reach-player>

Red Bullの動画プレーヤーを表示

説明

Red Bullの動画プレーヤーを表示

使い方

<amp-redbull-player 属性>
</amp-redbull-player>

必要なスクリプト

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

属性

属性名 説明
data-param-videoid(必須) ビデオID
data-param-skinid 表示するスキンのID
data-param-locale 追跡の文字列
id ID
fallback フォールバック。対象の要素にブラウザが未対応や読み込みに失敗などをユーザに伝えるもの
heights メディア式に基づいた要素の縦サイズ
layout レイアウト
media メディア属性
noloading 進捗インジケータ(グルグル回るアイコンみたいなやつ)をOFF
on イベントの実行用
placeholder 親要素のプレスホルダー(アニメーションや画像などで読み込まれる前に表示されるやつ)
sizes メディア式に基づいた要素の横サイズ
width 横幅
height 高さ

レイアウト

レイアウト名 説明
fill 利用可能なスペースを埋めるよう自動的にサイズ調整
fixed 指定した横幅と高さで固定
fixed-height 指定した高さで固定。横幅は自動的にサイズ調整
flex-item 親要素や周りの要素に応じて自動的にサイズ調整
intrinsic 指定したアスペクト比に自動的にサイズ調整
nodisplay 要素が非表示
responsive 画面サイズに応じて自動的にサイズ調整

基本的な使い方

<amp-redbull-player
  id="rbvideo"
  data-param-videoid="rrn:content:videos:3965a26c-052e-575f-a28b-ded6bee23ee1:en-INT"
  data-param-skinid="com"
  data-param-locale="en"
  height="360"
  width="640">
</amp-redbull-player>

Redditの投稿やコメントを表示

説明

Reddit の投稿やコメントを表示

使い方

<amp-reddit 属性>
</amp-reddit>

必要なスクリプト

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

属性

属性名 説明
data-embedtype(必須) タイプ
data-src(必須) 投稿またはコメントのパーマリンク
height(必須) 高さ
width(必須) 横幅
data-uuid コメント埋め込み用に提供されたUUID
data-embedcreated コメントの埋め込みの日時文字列
data-embedlive コメントの埋め込みの日時文字列
data-embedparent 埋め込みコメントを更新するかどうか
fallback フォールバック。対象の要素にブラウザが未対応や読み込みに失敗などをユーザに伝えるもの
heights メディア式に基づいた要素の縦サイズ
layout レイアウト
media メディア属性
noloading 進捗インジケータ(グルグル回るアイコンみたいなやつ)をOFF
on イベントの実行用
placeholder 親要素のプレスホルダー(アニメーションや画像などで読み込まれる前に表示されるやつ)
sizes メディア式に基づいた要素の横サイズ

レイアウト

レイアウト名 説明
fill 利用可能なスペースを埋めるよう自動的にサイズ調整
fixed 指定した横幅と高さで固定
fixed-height 指定した高さで固定。横幅は自動的にサイズ調整
flex-item 親要素や周りの要素に応じて自動的にサイズ調整
responsive 画面サイズに応じて自動的にサイズ調整

投稿

<amp-reddit
  layout="responsive"
  width="300"
  height="400"
  data-embedtype="post"
  data-src="https://www.reddit.com/r/me_irl/comments/52rmir/me_irl/?ref=share&amp;ref_source=embed">
</amp-reddit>

コメント

<amp-reddit
  layout="responsive"
  width="400"
  height="400"
  data-embedtype="comment"
  data-src="https://www.reddit.com/r/sports/comments/54loj1/50_cents_awful_1st_pitch_given_a_historical/d8306kw"
  data-uuid="b1246282-bd7b-4778-8c5b-5b08ac0e175e"
  data-embedcreated="2016-09-26T21:26:17.823Z"
  data-embedparent="true"
  data-embedlive="true">
</amp-reddit>

Riddleコンテンツを表示

説明

Riddleコンテンツを表示

使い方

<amp-riddle-quiz 属性>
</amp-riddle-quiz>

必要なスクリプト

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

属性

属性名 説明
data-riddle-id(必須) アイテムID
fallback フォールバック。対象の要素にブラウザが未対応や読み込みに失敗などをユーザに伝えるもの
heights メディア式に基づいた要素の縦サイズ
layout レイアウト
media メディア属性
noloading 進捗インジケータ(グルグル回るアイコンみたいなやつ)をOFF
on イベントの実行用
placeholder 親要素のプレスホルダー(アニメーションや画像などで読み込まれる前に表示されるやつ)
sizes メディア式に基づいた要素の横サイズ
width 横幅
height 高さ

レイアウト

レイアウト名 説明
fill 利用可能なスペースを埋めるよう自動的にサイズ調整
fixed 指定した横幅と高さで固定
fixed-height 指定した高さで固定。横幅は自動的にサイズ調整
flex-item 親要素や周りの要素に応じて自動的にサイズ調整
responsive 画面サイズに応じて自動的にサイズ調整

基本的な使い方

<amp-riddle-quiz
  layout="responsive"
  width="600"
  height="400"
  data-riddle-id="25799">
</amp-riddle-quiz>

説明

Narrativの機能を表示

使い方

<amp-smartlinks 属性>
</amp-smartlinks>

必要なスクリプト

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

属性

属性名 説明
nrtv-account-name(必須) Narrativアカウント名
linkmate Linkmateサービスを実行するためのフラグ
exclusive-links 排他的リンク
link-attribute URLを異なる要素属性に保存する場合
link-selector 収益化するすべてのリンクを取得
fallback フォールバック。対象の要素にブラウザが未対応や読み込みに失敗などをユーザに伝えるもの
heights メディア式に基づいた要素の縦サイズ
layout レイアウト
media メディア属性
noloading 進捗インジケータ(グルグル回るアイコンみたいなやつ)をOFF
on イベントの実行用
placeholder 親要素のプレスホルダー(アニメーションや画像などで読み込まれる前に表示されるやつ)
sizes メディア式に基づいた要素の横サイズ
width 横幅
height 高さ

レイアウト

レイアウト名 説明
nodisplay 要素が非表示

基本的な使い方

<amp-smartlinks
  layout="nodisplay"
  nrtv-account-name="supercoolpublisher"
  linkmate>
</amp-smartlinks>

属性あり

<amp-smartlinks
  layout="nodisplay"
  nrtv-account-name="examplepublisher"
  linkmate
  exclusive-links
  link-attribute="href"
  link-selector="a">
</amp-smartlinks>

ソーシャルシェアボタンを表示

説明

ソーシャルシェアボタンを表示

使い方

<amp-social-share 属性>
</amp-social-share>

必要なスクリプト

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

属性

属性名 説明
type(必須) プロバイダのタイプ
data-target ターゲットをどこに開くのか(_blank or _top)
data-share-endpoint 共有エンドポイントのURL
data-param-* 各サービスに渡すパラメータ
fallback フォールバック。対象の要素にブラウザが未対応や読み込みに失敗などをユーザに伝えるもの
heights メディア式に基づいた要素の縦サイズ
layout レイアウト
media メディア属性
noloading 進捗インジケータ(グルグル回るアイコンみたいなやつ)をOFF
on イベントの実行用
placeholder 親要素のプレスホルダー(アニメーションや画像などで読み込まれる前に表示されるやつ)
sizes メディア式に基づいた要素の横サイズ
width 横幅
height 高さ

タイプ

タイプ名 説明
system Web Share API
email メール
facebook Facebook
linkedin LinkedIn
pinterest Pinterest
gplus Google+
tumblr Tumblr
twitter Twitter
whatsapp WhatsApp
line LINE
sms SMS

レイアウト

レイアウト名 説明
container 子要素に応じて自動的にサイズ調整
fill 利用可能なスペースを埋めるよう自動的にサイズ調整
fixed 指定した横幅と高さで固定
fixed-height 指定した高さで固定。横幅は自動的にサイズ調整
flex-item 親要素や周りの要素に応じて自動的にサイズ調整
nodisplay 要素が非表示
responsive 画面サイズに応じて自動的にサイズ調整

基本的な使い方

<amp-social-share type="twitter"></amp-social-share>

Email

<amp-social-share
  type="email"
  data-param-subject="Hello World"
  data-param-body="What's up?"
  data-param-recipient="sample@xyz.com"
  aria-label="Share by email">
</amp-social-share>

Twitter

<amp-social-share
  type="twitter"
  aria-label="Share to Twitter">
</amp-social-share>

Facebook

<amp-social-share
  type="facebook"
  data-param-text="Hello world"
  data-param-href="https://example.com/?ref=URL"
  data-param-app_id="145634995501895"
  aria-label="Share to Facebook">
</amp-social-share>

Line

<amp-social-share
  type="line"
  aria-label="Share to line">
</amp-social-share>

whatsapp

<amp-social-share
  type="whatsapp"
  aria-label="Share to Whatsapp">
</amp-social-share>

Pinterest

<amp-social-share
  type="pinterest"
  data-param-media="https://lh3.googleusercontent.com/qNn8GDz8Jfd-s9lt3Nc4lJeLjVyEaqGJTk1vuCUWazCmAeOBVjSWDD0SMTU7x0zhVe5UzOTKR0n-kN4SXx7yElvpKYvCMaRyS_g-jydhJ_cEVYmYPiZ_j1Y9de43mlKxU6s06uK1NAlpbSkL_046amEKOdgIACICkuWfOBwlw2hUDfjPOWskeyMrcTu8XOEerCLuVqXugG31QC345hz3lUyOlkdT9fMYVUynSERGNzHba7bXMOxKRe3izS5DIWUgJs3oeKYqA-V8iqgCvneD1jj0Ff68V_ajm4BDchQubBJU0ytXVkoWh27ngeEHubpnApOS6fcGsjPxeuMjnzAUtoTsiXz2FZi1mMrxrblJ-kZoAq1DJ95cnoqoa2CYq3BTgq2E8BRe2paNxLJ5GXBCTpNdXMpVJc6eD7ceijQyn-2qanilX-iK3ChbOq0uBHMvsdoC_LsFOu5KzbbNH71vM3DPkvDGmHJmF67Vj8sQ6uBrLnzpYlCyN4-Y9frR8zugDcqX5Q=w400-h300-no"
  aria-label="Share to Pinterest">
</amp-social-share>

Baidu

<amp-social-share
  type="baidu"
  layout="responsive"
  width="40"
  height="40"
  data-share-endpoint="http://cang.baidu.com/do/add"
  data-param-iu="CANONICAL_URL"
  data-param-it="TITLE"
  aria-label="Share to Baidu">
  B
</amp-social-share>

SMS

<amp-social-share
  type="sms"
  layout="responsive"
  width="40"
  height="40"
  aria-label="Share via SMS">
</amp-social-share>

パラメータを渡す

<amp-social-share
  type="linkedin"
  width="60"
  height="44"
  data-param-text="Hello world"
  data-param-url="https://example.com/">
</amp-social-share>

data-share-endpoint

<amp-social-share
  type="vote-this-up"
  layout="container"
  data-share-endpoint="https://example.com/vote-this-up"
  data-param-text="Check this out: TITLE - CANONICAL_URL">
  Share on Whatsapp
</amp-social-share>

サイドバー

<amp-sidebar layout="nodisplay">
  <amp-social-share
    type="vote-this-up"
    layout="container"
    data-share-endpoint="https://example.com/vote-this-up"
    data-param-text="Check this out: TITLE - CANONICAL_URL">
    Share on Whatsapp
  </amp-social-share>
</amp-sidebar>

Soundcloudの音声プレーヤーを表示

説明

Soundcloudの音声プレーヤーを表示

使い方

<amp-soundcloud 属性>
</amp-soundcloud>

必要なスクリプト

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

属性

属性名 説明
data-trackid(必須) トラックID
data-playlistid プレイリストID
data-secret-token シークレットトークン
data-visual データビジュアルモード
data-color ウィジェットの色
width 横幅
height 高さ
layout レイアウト
fallback フォールバック。対象の要素にブラウザが未対応や読み込みに失敗などをユーザに伝えるもの
heights メディア式に基づいた要素の縦サイズ
layout レイアウト
media メディア属性
noloading 進捗インジケータ(グルグル回るアイコンみたいなやつ)をOFF
on イベントの実行用
placeholder 親要素のプレスホルダー(アニメーションや画像などで読み込まれる前に表示されるやつ)
sizes メディア式に基づいた要素の横サイズ
width 横幅
height 高さ

レイアウト

レイアウト名 説明
fill 利用可能なスペースを埋めるよう自動的にサイズ調整
fixed 指定した横幅と高さで固定
fixed-height 指定した高さで固定。横幅は自動的にサイズ調整
flex-item 親要素や周りの要素に応じて自動的にサイズ調整
intrinsic 指定したアスペクト比に自動的にサイズ調整
nodisplay 要素が非表示
responsive 画面サイズに応じて自動的にサイズ調整

Visual Mode

<amp-soundcloud
  width="480"
  height="480"
  layout="responsive"
  data-trackid="243169232"
  data-visual="true">
</amp-soundcloud>

Classic Mode

<amp-soundcloud
  width="480"
  height="480"
  layout="responsive"
  data-trackid="243169232"
  data-color="ff5500">
</amp-soundcloud>

Springboardの動画プレーヤーを表示

説明

Springboardの動画プレーヤーを表示

使い方

<amp-springboard-player 属性>
</amp-springboard-player>

必要なスクリプト

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

属性

属性名 説明
data-site-id(必須) SpringBoardサイトID
data-mode(必須) SpringBoardプレーヤーモード
data-content-id(必須) SpringBoardプレーヤーのコンテンツID
data-player-id(必須) スプリングボードプレーヤーID
data-domain(必須) Springboardパートナードメイン
data-items(必須) 再生リスト内の動画の数
fallback フォールバック。対象の要素にブラウザが未対応や読み込みに失敗などをユーザに伝えるもの
heights メディア式に基づいた要素の縦サイズ
layout レイアウト
media メディア属性
noloading 進捗インジケータ(グルグル回るアイコンみたいなやつ)をOFF
on イベントの実行用
placeholder 親要素のプレスホルダー(アニメーションや画像などで読み込まれる前に表示されるやつ)
sizes メディア式に基づいた要素の横サイズ
width 横幅
height 高さ

レイアウト

レイアウト名 説明
fill 利用可能なスペースを埋めるよう自動的にサイズ調整
fixed 指定した横幅と高さで固定
flex-item 親要素や周りの要素に応じて自動的にサイズ調整
responsive 画面サイズに応じて自動的にサイズ調整

基本的な使い方

<amp-springboard-player
  data-site-id="261"
  data-mode="video"
  data-content-id="1578473"
  data-player-id="test401"
  data-domain="test.com"
  data-items="10"
  layout="responsive"
  width="480"
  height="270">
</amp-springboard-player>

Twitterのツイートを表示

説明

Twitterのツイートを表示

使い方

<amp-twitter 属性>
</amp-twitter>

必要なスクリプト

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

属性

属性名 説明  
data-tweetid(必須) ツイートID  
height(必須) 高さ  
width(必須) 横幅  
data-momentid モーメントID  
data-timeline-source-type タイムラインタイプ  
data-* Twitterに渡すパラメータ [
fallback フォールバック。対象の要素にブラウザが未対応や読み込みに失敗などをユーザに伝えるもの  
heights メディア式に基づいた要素の縦サイズ  
layout レイアウト  
media メディア属性  
noloading 進捗インジケータ(グルグル回るアイコンみたいなやつ)をOFF  
on イベントの実行用  
placeholder 親要素のプレスホルダー(アニメーションや画像などで読み込まれる前に表示されるやつ)  
sizes メディア式に基づいた要素の横サイズ  

レイアウト

レイアウト名 説明
fill 利用可能なスペースを埋めるよう自動的にサイズ調整
fixed 指定した横幅と高さで固定
fixed-height 指定した高さで固定。横幅は自動的にサイズ調整
flex-item 親要素や周りの要素に応じて自動的にサイズ調整
intrinsic 指定したアスペクト比に自動的にサイズ調整
nodisplay 要素が非表示
responsive 画面サイズに応じて自動的にサイズ調整

基本的な使い方

<amp-twitter
  width="375"
  height="472"
  layout="responsive"
  data-tweetid="885634330868850689">
</amp-twitter>

Moments

<amp-twitter
  width=486
  height=1312
  layout="responsive"
  data-momentid="1009149991452135424"
  data-limit="2">
</amp-twitter>

Timelines

<amp-twitter
  width=486
  height=1312
  layout="responsive"
  data-timeline-source-type="profile"
  data-timeline-screen-name="amphtml"
  data-tweet-limit="5">
</amp-twitter>

Vimeoの動画プレーヤーを表示

説明

Vimeoの動画プレーヤーを表示

使い方

<amp-vimeo 属性>
</amp-vimeo>

必要なスクリプト

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

属性

属性名 説明
data-videoid(必須) 動画 ID
height(必須) 高さ
width(必須) 横幅
autoplay 自動再生
fallback フォールバック。対象の要素にブラウザが未対応や読み込みに失敗などをユーザに伝えるもの
heights メディア式に基づいた要素の縦サイズ
layout レイアウト
media メディア属性
noloading 進捗インジケータ(グルグル回るアイコンみたいなやつ)をOFF
on イベントの実行用
placeholder 親要素のプレスホルダー(アニメーションや画像などで読み込まれる前に表示されるやつ)
sizes メディア式に基づいた要素の横サイズ

レイアウト

レイアウト名 説明
fill 利用可能なスペースを埋めるよう自動的にサイズ調整
fixed 指定した横幅と高さで固定
fixed-height 指定した高さで固定。横幅は自動的にサイズ調整
flex-item 親要素や周りの要素に応じて自動的にサイズ調整
responsive 画面サイズに応じて自動的にサイズ調整

基本的な使い方

<amp-vimeo
  data-videoid="27246366"
  width="500"
  height="281">
</amp-vimeo>

自動再生(autoplay)

<amp-vimeo
  data-videoid="27246366"
  width="500"
  height="281"
  layout="responsive"
  noloading
  autoplay>
</amp-vimeo>

noloading

<amp-vimeo
  data-videoid="27246366"
  width="500"
  height="281"
  layout="responsive"
  noloading="noloading">
</amp-vimeo>

Vineの動画プレーヤーを表示

説明

Vine の動画プレーヤーを表示

使い方

<amp-vine 属性>
</amp-vine>

必要なスクリプト

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

属性

属性名 説明
data-vineid(必須) 動画ID
height(必須) 高さ
width(必須) 横幅
fallback フォールバック。対象の要素にブラウザが未対応や読み込みに失敗などをユーザに伝えるもの
heights メディア式に基づいた要素の縦サイズ
layout レイアウト
media メディア属性
noloading 進捗インジケータ(グルグル回るアイコンみたいなやつ)をOFF
on イベントの実行用
placeholder 親要素のプレスホルダー(アニメーションや画像などで読み込まれる前に表示されるやつ)
sizes メディア式に基づいた要素の横サイズ

レイアウト

レイアウト名 説明
fill 利用可能なスペースを埋めるよう自動的にサイズ調整
fixed 指定した横幅と高さで固定
fixed-height 指定した高さで固定。横幅は自動的にサイズ調整
flex-item 親要素や周りの要素に応じて自動的にサイズ調整
nodisplay 要素が非表示
responsive 画面サイズに応じて自動的にサイズ調整

基本的な使い方

<amp-vine
  width="400"
  height="400"
  data-vineid="MdKjXez002d">
</amp-vine>

Viqeoの動画プレーヤーを表示

説明

Viqeoの動画プレーヤーを表示

使い方

<amp-viqeo-player 属性>
</amp-viqeo-player>

必要なスクリプト

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

属性

属性名 説明
autoplay 自動再生
data-profileid データプロファイルID
data-videoid ビデオの識別子
width 横幅
height 高さ
fallback フォールバック。対象の要素にブラウザが未対応や読み込みに失敗などをユーザに伝えるもの
heights メディア式に基づいた要素の縦サイズ
layout レイアウト
media メディア属性
noloading 進捗インジケータ(グルグル回るアイコンみたいなやつ)をOFF
on イベントの実行用
placeholder 親要素のプレスホルダー(アニメーションや画像などで読み込まれる前に表示されるやつ)
sizes メディア式に基づいた要素の横サイズ
width 横幅
height 高さ

レイアウト

レイアウト名 説明
fill 利用可能なスペースを埋めるよう自動的にサイズ調整
fixed 指定した横幅と高さで固定
fixed-height 指定した高さで固定。横幅は自動的にサイズ調整
flex-item 親要素や周りの要素に応じて自動的にサイズ調整
responsive 画面サイズに応じて自動的にサイズ調整

基本的な使い方

<amp-viqeo-player
  data-profileid="184"
  data-videoid="b51b70cdbb06248f4438"
  width="640"
  height="360"
  layout="responsive">
</amp-viqeo-player>

自動再生(autoplay)

<amp-viqeo-player
  width="640"
  height="400"
  data-profileid="184"
  data-videoid="922d04f30b66f1a32eb2"
  layout="responsive"
  autoplay>
</amp-viqeo-player>

VKの投稿を表示

説明

VKの投稿を表示

使い方

<amp-vk 属性>
</amp-vk>

必要なスクリプト

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

属性

属性名 説明
data-embedtype 埋め込みのタイプ(post or poll)
data-owner-id 投稿の所有者ID
data-post-id 投稿の投稿ID
data-hash ウィジェット接続のセキュリティハッシュ
data-api-id 投票のAPI ID
data-poll-id 投票ID
fallback フォールバック。対象の要素にブラウザが未対応や読み込みに失敗などをユーザに伝えるもの
heights メディア式に基づいた要素の縦サイズ
layout レイアウト
media メディア属性
noloading 進捗インジケータ(グルグル回るアイコンみたいなやつ)をOFF
on イベントの実行用
placeholder 親要素のプレスホルダー(アニメーションや画像などで読み込まれる前に表示されるやつ)
sizes メディア式に基づいた要素の横サイズ
width 横幅
height 高さ

レイアウト

レイアウト名 説明
fixed 指定した横幅と高さで固定
flex-item 親要素や周りの要素に応じて自動的にサイズ調整
responsive 画面サイズに応じて自動的にサイズ調整

post

<amp-vk
  width="500"
  height="300"
  data-embedtype="post"
  layout="responsive"
  data-owner-id="1"
  data-post-id="45616"
  data-hash="Yc8_Z9pnpg8aKMZbVcD-jK45eAk">
</amp-vk>

poll

<amp-vk
  width="400"
  height="300"
  layout="responsive"
  data-embedtype="poll"
  data-api-id="6183531"
  data-poll-id="274086843_1a2a465f60fff4699f">
</amp-vk>

Wistiaの動画を表示

説明

Wistiaの動画を表示

使い方

<amp-wistia-player 属性>
</amp-wistia-player>

必要なスクリプト

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

属性

属性名 説明
data-media-hashed-id(必須) メディアID
fallback フォールバック。対象の要素にブラウザが未対応や読み込みに失敗などをユーザに伝えるもの
heights メディア式に基づいた要素の縦サイズ
layout レイアウト
media メディア属性
noloading 進捗インジケータ(グルグル回るアイコンみたいなやつ)をOFF
on イベントの実行用
placeholder 親要素のプレスホルダー(アニメーションや画像などで読み込まれる前に表示されるやつ)
sizes メディア式に基づいた要素の横サイズ
width 横幅
height 高さ

レイアウト

レイアウト名 説明
fill 利用可能なスペースを埋めるよう自動的にサイズ調整
fixed 指定した横幅と高さで固定
fixed-height 指定した高さで固定。横幅は自動的にサイズ調整
flex-item 親要素や周りの要素に応じて自動的にサイズ調整
responsive 画面サイズに応じて自動的にサイズ調整

基本的な使い方

<amp-wistia-player
  data-media-hashed-id="u8p9wq6mq8"
  width="512"
  height="360">
</amp-wistia-player>

Yotpoのオンサイトウィジェットを表示

説明

Yotpoのオンサイトウィジェットを表示

使い方

<amp-yotpo 属性>
</amp-yotpo>

必要なスクリプト

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

属性

属性名 説明
data-app-key アカウントアプリキー
data-* パラメータ
fallback フォールバック。対象の要素にブラウザが未対応や読み込みに失敗などをユーザに伝えるもの
heights メディア式に基づいた要素の縦サイズ
layout レイアウト
media メディア属性
noloading 進捗インジケータ(グルグル回るアイコンみたいなやつ)をOFF
on イベントの実行用
placeholder 親要素のプレスホルダー(アニメーションや画像などで読み込まれる前に表示されるやつ)
sizes メディア式に基づいた要素の横サイズ
width 横幅
height 高さ

レイアウト

レイアウト名 説明
fill 利用可能なスペースを埋めるよう自動的にサイズ調整
fixed 指定した横幅と高さで固定
fixed-height 指定した高さで固定。横幅は自動的にサイズ調整
flex-item 親要素や周りの要素に応じて自動的にサイズ調整
responsive 画面サイズに応じて自動的にサイズ調整

ボトムラインウィジェット

<amp-yotpo
  width="550"
  height="100"
  data-app-key="liSBkl621ZZsb88tsckAs6Bzx6jQeTJTv8CDf8y5"
  data-widget-type="BottomLine"
  data-product-id="9408616206">
</amp-yotpo>

レビューウィジェット

<amp-yotpo
  width="550"
  height="700"
  layout="responsive"
  data-app-key="liSBkl621ZZsb88tsckAs6Bzx6jQeTJTv8CDf8y5"
  data-widget-type="MainWidget"
  data-product-id="9408616206"
  data-name="hockey skates"
  data-url="https://ranabram.myshopify.com/products/hockey-skates"
  data-image-url="https://ichef.bbci.co.uk/news/320/media/images/83351000/jpg/_83351965_explorer273lincolnshirewoldssouthpicturebynicholassilkstone.jpg"
  data-descriptipn="skates"
  data-yotpo-element-id="1">

</amp-yotpo>

YouTubeの動画プレーヤーを表示

説明

YouTubeの動画プレーヤーを表示

使い方

<amp-youtube 属性>
</amp-youtube>

必要なスクリプト

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

属性

属性名 説明
autoplay 自動再生
data-videoid YouTube動画ID
data-live-channelid YouTubeチャンネルID
data-param-* パラメータ
dock 最小化
credentials 証明書
fallback フォールバック。対象の要素にブラウザが未対応や読み込みに失敗などをユーザに伝えるもの
heights メディア式に基づいた要素の縦サイズ
layout レイアウト
media メディア属性
noloading 進捗インジケータ(グルグル回るアイコンみたいなやつ)をOFF
on イベントの実行用
placeholder 親要素のプレスホルダー(アニメーションや画像などで読み込まれる前に表示されるやつ)
sizes メディア式に基づいた要素の横サイズ
width 横幅
height 高さ

レイアウト

レイアウト名 説明
fill 利用可能なスペースを埋めるよう自動的にサイズ調整
fixed 指定した横幅と高さで固定
fixed-height 指定した高さで固定。横幅は自動的にサイズ調整
flex-item 親要素や周りの要素に応じて自動的にサイズ調整
nodisplay 要素が非表示
responsive 画面サイズに応じて自動的にサイズ調整

基本的な使い方

<amp-youtube
  width="480"
  height="270"
  data-videoid="dQw4w9WgXcQ">
</amp-youtube>

自動再生(autoplay)

<amp-youtube
  autoplay
  data-videoid="lBTCB7yLs8Y"
  width="358"
  height="204"
  layout="responsive">
</amp-youtube>

Live Channel Id

<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>

loop

<amp-youtube
  loop
  width="480"
  height="270"
  data-videoid="dQw4w9WgXcQ">
</amp-youtube>