お問い合わせ

資料ダウンロード

TOP

ナレッジ一覧

StudioでYoutube動画を埋め込む方法！自動再生も簡単に

ナレッジ

#
新規事業立ち上げ
#
サービス改善・グロース

更新日

2026/2/15

Studioでは、2025年5月のアップデートにより、動画ファイルを直接アップロードして再生できるようになりました。

しかし、YouTubeを利用して動画を埋め込む方法にも、依然として多くのメリットがあります。

たとえば：

- Studioのストレージ容量を節約したい場合
- YouTube上で再生回数やコメントを集めたい場合
- 外部メディアやSNSと連携させたい場合

本記事では、YouTube動画をStudioの任意の場所に埋め込む方法を、3ステップで分かりやすく解説します。

この記事について

編集部

StudioでYouTube動画を埋め込む方法と他の方法との比較
StudioでYouTube動画を埋め込む3つの手順
YouTube動画埋め込み時のオプション設定
動画の開始位置の指定
自動再生やループ再生の設定
StudioでYouTube動画を埋め込む際に押さえておくべき注意点
Studioでの動画埋め込みに関するQ＆A
ストレージ容量を抑えながら、UIのない背景動画を設置する方法はありますか？
レスポンシブ対応で比率を崩さず、動画をきれいに表示させることはできますか？

StudioでYouTube動画を埋め込む方法と他の方法との比較

Studioで動画を用いる場合、「YouTubeの動画を埋め込む」「Studioサイトへ直接アップロードする」「Vimeoの動画を埋め込む」などの方法があります。

それぞれのメリット・デメリットについてまとめると、以下の通りです。

方法	メリット	デメリット
YouTube埋め込み	無料で簡単外部メディアやSNSと連携できる	UIが残ってしまうループ再生に条件がある
Studio直接アップロード	ノーコードで簡単 UI非表示などのカスタムが可能	ストレージ容量を消費する
Vimeo有料埋め込み	プライバシーの制御が可能 UI非表示なども可能	有料

今回紹介するのは、YouTube動画をサイト内に埋め込む方法になります。

Studioサイトへ直接アップロードする方法については、こちらの記事をご参照ください。
https://studio-goro.com/column/knowledge/studio_background-video

StudioでYouTube動画を埋め込む3つの手順

StudioでYouTube動画を埋め込む方法を、3つのステップで解説します。以下の手順通りに進めることで、簡単に動画を配置できます。

1 . Studioのデザインエディタを開き、左パネルから「追加」→「ボックス」→「Embed」「YouTube」を選択し、編集画面にドラッグ&ドロップ

Studioでの動画埋め込み　左パネルから「追加」→「ボックス」→「Embed」→「YouTube」を選択し、編集画面にドラッグ&ドロップする

2. 配置したYouTubeパーツを選択し、設定パネルを開く

3. 設定パネルの「埋め込みコード」欄に、YouTube上でコピーした埋め込みコードをペースト

埋め込みたい動画の「共有」ボタンをクリック。「埋め込む」を選択し、表示された埋め込みコードをコピー。

Studioの設定パネルの「埋め込みコード」欄に、Youtube上でコピーした埋め込みコードをペーストする

この際、YouTubeの短縮URL（youtu.be形式）ではなく、必ず動画の再生ページのURL（youtube.com/watch?v=xxxx形式）を使用してください。

YouTube動画埋め込み時のオプション設定

YouTube動画は単に埋め込むだけでなく、仕様の調整が可能です。適切に調整することで、より魅力的に見せる⁨⁩ことができます。

動画の開始位置の指定

動画の開始位置を設定し、伝えたい場面から再生を始めることができます。特に長い動画では、不要な部分を省き、視聴者が関心を持ちやすいポイントを効果的に見せることができるため、サイトへの関心を引きやすくなります。

動画の開始位置を指定するには、YouTubeの埋め込みコードをコピーする際に「開始位置」のチェックボックスにチェックを入れ、希望の開始時間を入力します。

自動再生やループ再生の設定

自動再生やループ再生を設定すると、動画が途切れることなく再生されます。その結果、ユーザーの印象に残りやすくなり、サイトの滞在時間を延ばす効果が期待できます。

1. 自動再生の設定

埋め込みコードsrcのURLの最後に「?autoplay=1&mute=1」を追加

例：src="<https://www.youtube.com/embed/VIDEO_ID?autoplay=1&mute=1>"

2. ループ再生の設定

埋め込みコードsrcのURLの最後に「?loop=1&playlist=VIDEO_ID」を追加

例：src="<https://www.youtube.com/embed/VIDEO_ID?loop=1&playlist=VIDEO_ID>"

3. 自動再生とループ再生の組み合わせ

両方のパラメータを「&」で連結することも可能

例：src="<https://www.youtube.com/embed/VIDEO_ID?autoplay=1&mute=1&loop=1&playlist=VIDEO_ID>"

StudioでYouTube動画を埋め込む際に押さえておくべき注意点

YouTube動画を利用すると、動画のロード時やマウスホバー時にタイトルや再生バーが表示されます。この表示により、ページ上の視覚的な要素が増え、場合によってはユーザーの注意が分散したり、全体のデザインの一貫性が損なわれることがあります。

現状、このUIを完全に非表示にする方法はありません。この場合はStudioの直接アップロードやVimeoの動画埋め込みなどを用いる必要があります。

Studioでの動画埋め込みに関するQ＆A

Studioでの動画埋め込みについて、よくある質問にお答えします。

ストレージ容量を抑えながら、UIのない背景動画を設置する方法はありますか？

Vimeoの有料プランのみで利用できる「?background=1」というパラメータを使用することで、メニューやバナーを非表示にするカスタマイズが可能です。

StudioでVimeoの動画を埋め込む方法については、Studio公式サイトをご参照ください。

レスポンシブ対応で比率を崩さず、動画をきれいに表示させることはできますか？

はい、可能です。以下の手順で動画を一定の比率で表示させることができます。

親ボックスを作成
動画の縦横比と同じ比率の画像を用意、画像のタイプはimgを選択し、幅を100%、縦をautoに設定して配置
親ボックスの中に、絶対配置でEmbedボックスを配置。このとき、top: 0、left: 0、right: 0、bottom: 0に指定

レスポンシブ対応について、詳しくはStudio公式サイトをご覧ください。

ノーコードツール「Studio」を活用すると、YouTubeの動画を簡単に埋め込むことができ、魅力的なデザインのウェブサイトを簡単に作成できます。動画のアップロードや埋め込み、カスタマイズの方法も記事の手順に沿って進めれば、初めての方でもスムーズに実装できます。

Studioを使ったWebサイト制作でお困りの方は、株式会社GOROにお気軽にご相談ください。YouTubeやVimeoの活用から、動画演出を活かしたデザイン提案まで幅広くサポートいたします。

この記事について

編集部

記事を書いた人