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

YouTube動画を埋め込む

埋め込み用のボックスを使って、YouTube動画をサイト上に埋め込み表示する方法をご紹介します。自動再生やループ再生のカスタマイズも可能です。

今週アップデートされました

Tips: 動画を直接アップロードする
mp4やwebm形式の動画(各ファイル1GBまで)をエディタにアップロードして、ページ上に直接配置することもできます。

詳細は動画ボックスの特徴と操作方法をご覧ください。

YouTube動画埋め込みの制限

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

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

  • モバイルデバイスでの自動再生はYouTubeの仕様により制限されています。デスクトップのみ有効です。

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

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

    参照:


    代替案:

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

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

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

YouTube動画の埋め込み手順

(1) YouTube側でリンクを取得する

  1. YouTubeを開き、動画ページのアドレスバーから再生ページのURLをコピーします、
    (例:https://www.youtube.com/watch?v=xxxx)。

スクリーンショット:動画ページのアドレスバーから再生ページのURLをコピーする様子。

注意:「https://youtu.be/xxxx」形式のURLでは埋め込みが上手くいきません。

(2) 埋め込みボックス(Embedボックス)を配置する

  1. ナビゲーションで追加アイコンをクリックします。

  2. [基本]タブをクリックします。

  3. [埋め込み]セクションから[YouTube]の埋め込みボックスをクリックします。

  4. YouTube用の埋め込みボックスがスクリーン上に配置されます。

(2) URLを差し替える

  1. (1)で配置したYouTubeボックス(Embedボックス)を選択します。

  2. 右パネル上で[埋め込み]タブを選択します。右パネルが閉じている場合は開いてください。

  3. [動画URL]の入力欄に入っているURLを削除し、(2)でコピーしたURLを貼り付けます。

  4. ライブプレビューURLを開き、動作確認を行います。

  5. 公開済みのサイトを編集していた場合は、サイトを更新します。 更新するまで、変更内容は反映されません。投稿内容がエディタ上に反映されない場合、ブラウザの更新(リロード)をしてください。

再生ボタン・再生バーの非表示と自動・ループ再生設定方法

埋め込みコードを編集すると、表示や再生方法のカスタマイズが可能です。

ここでは、再生ボタン・再生バーの非表示と自動・ループ再生の設定方法をご紹介します。

  1. 下記コードを編集します。
    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>


    このコードでも、YouTubeロゴは残ります。

  2. ページに配置したYouTubeボックス(Embedボックス)を選択します。

  3. 右パネル上で[埋め込み]タブを選択します。右パネルが閉じている場合は開いてください。

  4. [埋め込みコード]の入力フィールド内で[エディタを開く]をクリックします。

  5. [埋め込みコードを編集]画面の左側で、もともと入っている文字を削除し、1でコピーしたコード貼り付けて[保存]します。

  6. 公開済みのサイトを編集していた場合は、サイトを更新します。 更新するまで、変更内容は反映されません。投稿内容がエディタ上に反映されない場合、ブラウザの更新(リロード)をしてください。

関連記事(Studioサイトへの外部アップロード動画設置について)

video play mp4 mov

ビデオ ムービー ユーチューブ

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