メインコンテンツにスキップ

ディスプレイに動画を表示する

対応者:Anthony Glover
3か月以上前に更新

2MBまでのmp4ファイルをアップロードできます。

このファイルは、シングルイメージタイプの画像、画像コンテンツ、ステッカーコンテンツでご利用いただけます。

シングルイメージタイプ以外の背景画像としてはご利用いただけません。


外部のコンテンツを利用する

「コンテンツを追加」から 「HTML」を選び、そこにYouTube 等から取得したコードを貼り付けるか、videoタグを挿入してください。

※シングルイメージタイプのディスプレイを選択された場合にはコンテンツ追加ができませんのでご注意ください

YOUTUBEの場合

Youtubeの場合のコード取得方法

「共有」から、「埋め込む」をクリックし、コードを取得してください。

Youtubeプレーヤーのカスタマイズ

取得したコードは以下のようになります。

動画ID(今回の例でいうと 799i7Mx4sBU )等は異なりますので、ご自身のものと適宜読み替えてください。

<iframe 
 width="560"
 height="315"
 src="https://www.youtube.com/embed/799i7Mx4sBU?si=sdgC2Rqvr35M2oHK"
 title="YouTube video player" frameborder="0"
 allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen>
</iframe>

上記の取得したコードから少しカスタマイズして以下のようにするのがおすすめです。

<iframe 
 width="500"
 height="315"
 src="https://www.youtube.com/embed/799i7Mx4sBU?si=sdgC2Rqvr35M2oHK&mute=1&autoplay=1&controls=0&rel=0&loop=1&playlist=799i7Mx4sBU"
 title="YouTube video player" frameborder="0"
 allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen>
</iframe>

変更点

動画を自動再生する

  • srcの末尾に以下を追加: &mute=1&autoplay=1  ミュートされて自動再生されます。(ミュートしないと自動再生はされません)

余計なものを表示しない

  • srcの末尾に以下を追加: &controls=0 コントロールが出なくなります。

  • srcの末尾に以下を追加: &rel=0 動画終了後に関連動画がでなくなります。

動画をループさせる

  • srcの末尾に以下を追加: &loop=1&playlist=動画ID

ディスプレイに動画をフィットさせる

方法はこちらをご覧ください。-> IFRAMEだけをポップアップに表示したい

Videoタグの場合

mp4のなどのURLをsrcに設定してください。その他の設定はお好みで変更してください。

<video src="ビデオのURL"  width="100%" height="auto" autoplay muted playsinline></video>
こちらの回答で解決しましたか?