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

mp4ファイルをアップロードして利用する

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

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

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

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

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

YOUTUBEの場合

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

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

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

取得したコードは以下のようになります。
動画ID等は異なりますので、ご自身のものと適宜読み替えてください。

<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="100%" 
　height="auto" 
　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>

変更点
ディスプレイに合わせてプレーヤーを表示する

• widthを100%
• heightをauto

動画を自動再生する

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

余計なものを表示しない

• srcの末尾に以下を追加: &controls=0　コントロールが出なくなります。
• srcの末尾に以下を追加: &rel=0　動画終了後に関連動画がでなくなります。

動画をループさせる

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

Videoタグの場合

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

<video src="ビデオのURL"  width="100%" height="auto" autoplay muted playsinline></video>

更新日 27/02/2025