に関する記事です。 デザイン
この記事は次の言語でも利用可能です

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

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



ディスプレイには動画を表示することも可能です。

「コンテンツを追加」から 「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

この記事は役に立ちましたか?

ご意見をお聞かせください

キャンセル

ありがとうございます