メインコンテンツにスキップ
すべてのコレクションデザインエディタEmbedボックス
YouTube動画をサイトに埋め込む方法
YouTube動画をサイトに埋め込む方法

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

Saika avatar
対応者：Saika
一週間前以上前にアップデートされました

対象プラン：全プラン

YouTube動画の埋め込み方法

埋め込み用のボックス（Embedボックス）を使えば、YouTube動画をページに埋め込むことが可能です。

メインビジュアルや背景に動画を表示することで、サイトの世界観やブランドイメージの視覚的な訴求に役立てることができます。

この記事では、Embedボックスを使ってYouTube動画をサイトに埋め込む方法を説明します。

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

YouTube動画埋め込みの制限

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

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

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

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

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

    参照：

    代替案：

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

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

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

埋め込み手順

動画の埋め込みは、デザインエディタで行います。

事前準備

動画ページのアドレスバーから再生ページのURLをコピーします（例：https://www.youtube.com/watch?v=xxxx）。

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

注意：「https://youtu.be/xxxx」形式のURLを入力しても埋め込みが上手くいきません。

Step 1. 埋め込みボックス（Embedボックス）の配置

  1. エディタを開き、画面左側の追加パネルを開きます。

  2. ボックスメニューからYouTubeのEmbedボックスをページに配置します。

    スクリーンショット：Studioエディタにて、ボックスメニューからYouTubeのEmbedボックスをページに配置する様子。

Step 2. URLの差し替え

  1. ページに配置したYouTubeボックス（Embedボックス）を選択します。

  2. 画面右側の設定パネルを開きます。

  3. [動画URL]のサンプルURLを削除し、コピーしたURLをペーストします。

スクリーンショット：Studioエディタにて、[動画URL]のサンプルURLを削除し、コピーしたURLをペーストする様子。

Step 3. 動作確認

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

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

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

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

  1. 下記コードを編集します。
    xxxxの部分２箇所を、埋め込みたい動画の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. [埋め込みコード]のコードを削除し、編集したコードをペーストします。

    スクリーンショット：Studioエディタにて、[埋め込みコード]のコードを削除し、編集したコードをペーストする様子。

video play mp4 mov

ビデオ ムービー

関連記事
背景動画の設定方法
Vimeo動画を埋め込む
X（Twitter）を埋め込む
Lottieの埋め込みとカスタマイズ
Studioサイトに iframe を埋め込むことはできますか？
こちらの回答で解決しましたか？