メインコンテンツにスキップ
YouTube動画を埋め込む

YouTubeに公開されている動画を埋め込む方法をご紹介します。

Saika avatar
対応者:Saika
1か月以上前に更新

YouTube動画の埋め込み

Studioでは、Embedボックスを使ってメインビジュアルや背景に動画を表示することができます。動画を埋め込むことで、世界観やブランドイメージの視覚的な訴求に役立てることができます。

現在、動画の直接アップロードには対応していません。YouTubeやVimeoにアップロードした動画の埋め込みコードを使って埋め込む必要があります。

YouTube動画の利用について

YouTube動画の利用にはいくつかの制約があります。

  • 動画のロード時やマウスホバー時にタイトルや再生バーが表示される

  • モバイルデバイスでの自動再生はYouTubeの仕様により制限される(デスクトップのみ有効)

注意:音声付き動画の自動再生とブラウザ制限について

YouTubeやVimeoの動画を音声ありで自動再生する場合、ブラウザ側のポリシーによって制限されることがあります。

例えばChromeブラウザでは、音声付き自動再生には特定の条件が必要で、条件を満たさない場合は、コードに autoplay=1&muted=0 などのパラメータを付けても、音声は再生されません。

参照:

代替え案
ブラウザの制限をStudio側で回避することはできませんが、以下の2つの方法を検討できます。

  1. 音声なし(ミュート)で自動再生する

  2. 自動再生を設定せず、再生バーを表示して訪問者が手動で再生できるようにする

埋め込み手順

  1. エディタ左側の追加ボックス内、埋め込みメニューからYouTube動画のEmbedボックスを追加します

  2. 表示させたいYouTube動画のURL(例:https://www.youtube.com/watch?v=xxxx)をコピーします。

  3. Embedボックスを選択したまま、設定パネルを開きコピーした動画のURLへ差し替えます

    ※ 「https://youtu.be/xxxx」形式のURL(動画そのもののURL)を入力しても埋め込みが上手くいきません。必ず、動画ページのアドレスバーから再生ページのURLをコピーしてください

自動&ループ再生させる

「動画URL」欄を使って簡易的に埋め込んだYouTube動画には、再生ボタンや再生バーが表示されます。

代表的なカスタマイズ例として、これらを非表示にし、動画を自動再生&自動ループさせる埋め込みコードの形式をご紹介します。(YouTubeロゴは消すことができません)

xxxxの部分2箇所を、埋め込みたい動画のID(URLのwatch?v=xxxxの部分)に置き換えて、「埋め込みコード」欄に直接入力してご利用ください。

<iframe width="560" height="315" src="https://www.youtube.com/embed/xxxx?rel=0&amp;controls=0&amp;showinfo=0&amp;autoplay=1&amp;loop=1&amp;playlist=xxxx&amp;mute=true" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

video play mp4 mov

ビデオ ムービー

こちらの回答で解決しましたか?