ディスプレイに動画を表示する
ディスプレイに動画を表示する
ディスプレイには動画を表示することも可能です。
「コンテンツを追加」から 「HTML」を選び、そこに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"
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 動画終了後に関連動画がでなくなります。
更新日 01/05/2024
ありがとうございます