Studio Help

すべてのコレクションデザインエディタEmbedボックス

YouTube動画をサイトに埋め込む方法

YouTube動画をサイトに埋め込む方法

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

対応者：Saika

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

対象プラン：全プラン

YouTube動画の埋め込み方法

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

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

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

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

YouTube動画埋め込みの制限

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

動画のロード時やマウスホバー時にタイトルや再生バーが表示されます。
モバイルデバイスでの自動再生はYouTubeの仕様により制限されています。デスクトップのみ有効です。
YouTubeやVimeoの動画を音声ありで自動再生する場合、ブラウザ側のポリシーによって制限されることがあります。
例えばChromeブラウザでは、音声付き自動再生には特定の条件が必要で、条件を満たさない場合は、コードに autoplay=1&muted=0 などのパラメータを付けても、音声は再生されません。
参照：
- 埋め込み動画の自動再生とループ | Vimeoヘルプセンター
- Chrome の自動再生ポリシー | Blog | Chrome for Developers
代替案：
ブラウザの制限をStudio側で回避することはできませんが、以下の2つの方法を検討できます。
1. 音声なし（ミュート）で自動再生する
2. 自動再生を設定せず、再生バーを表示して訪問者が手動で再生できるようにする

埋め込み手順

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

事前準備

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

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

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

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

エディタを開き、画面左側の追加パネルを開きます。
ボックスメニューからYouTubeのEmbedボックスをページに配置します。

Step 2. URLの差し替え

ページに配置したYouTubeボックス（Embedボックス）を選択します。
画面右側の設定パネルを開きます。
[動画URL]のサンプルURLを削除し、コピーしたURLをペーストします。

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

Step 3. 動作確認

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

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

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

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

下記コードを編集します。
xxxxの部分２箇所を、埋め込みたい動画のID（URLのwatch?v=xxxxの部分）に置き換えます。

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

このコードでも、YouTubeロゴは残ります。
ページに配置したYouTubeボックス（Embedボックス）を選択します。
画面右側の設定パネルを開きます。
[埋め込みコード]のコードを削除し、編集したコードをペーストします。

video play mp4 mov

ビデオ ムービー

関連記事

背景動画の設定方法

Vimeo動画を埋め込む

X（Twitter）を埋め込む

Lottieの埋め込みとカスタマイズ

Studioサイトに iframe を埋め込むことはできますか？