【初心者向け】Studioで動画を埋め込む方法を徹底解説!

ノーコードツールStudioで動画を埋め込む方法を徹底解説

「Youtubeの動画を埋め込む方法が知りたい」 「動画の再生時間を指定したい」

そんな悩みを持つ方も多いのではないでしょうか。

この記事では、Studio内に動画を埋め込む方法を解説していきます。

YoutubeとVimeoに分けてご紹介しますので、ぜひ最後までお読みください。

本記事の内容
  • StudioでYoutube動画を埋め込む方法
  • StudioでVimeo動画を埋め込む方法を
  • おすすめの埋め込み方法

社内でサイト制作ができずに、お困りではありませんか?

自社で運用できるWebサイトが欲しい方へ
スタートアップや広告代理店の方へ

・Web知識が少ないスタッフでも管理・更新できるWebサイトが欲しい

・1ヶ月以内&限られた予算内でWebサイトを制作したい

・ノーコードでのサイト制作を丸投げできるパートナーを探している

Webサイト制作・運用のコストを抑えたい方は、ぜひ以下のフォームからお問い合わせください。

ホームページ経由でお問い合わせをいただいた方には、StudioでWebサイトを運用して、売上を数倍に上げるために押さえるべきチェック項目をまとめた限定資料をお渡しさせていただきます。

目次

Youtube動画を埋め込む方法

Studio内にYoutubeの動画を埋め込む手順は以下の通りです。

  1. Youtubeに動画をアップロードする
  2. Youtubeから埋め込みコードを取得
  3. StudioにYoutubeパーツを配置
  4. 動画の埋め込みコードを追加

それぞれ詳しく解説します。

参考:StudioでLP制作を行うメリットとは?制作の流れも解説!

手順1.Youtubeに動画をアップロードする

まずはYoutubeの管理画面であるYoutube Studioから動画をアップしましょう。

Youtube Studio内にある「作成」を選択し、「動画をアップロード」を選択しましょう。

その後、アップロードしたい動画を追加し、各種設定を行った後「公開」を行いましょう。

手順2.Youtubeから埋め込みコードを取得

動画公開後、埋め込みコードを取得します。

埋め込みコードの取得は、「共有」を選択することで行うことができます。

メニューの中にある「埋め込む」を選択します。

「コピー」を選択することで埋め込みコードをコピーすることができます。

ここでは動画の開始時間を指定することができるので、お好みで設定すると良いでしょう。

手順3.StudioにYoutubeパーツを配置

埋め込みコードが取得できたら、Studio内にYoutubeパーツを配置しましょう。

左パネルを開き、「追加」→「ボックス」→「Embed」→「Youtube」を選択し、編集画面上にドラッグ&ドロップします。

手順4.動画の埋め込みコードを追加

Youtubeパーツが配置できたら、先程取得した動画の埋め込みコードをiframeにペーストしましょう。

正しくコードを追加できた場合には、動画のサムネイルが表示されます。

Vimeo動画を埋め込む方法

Studio内にVimeo動画を埋め込む手順は以下の通りです。

  1. Vimeoに動画をアップロードする
  2. Vimeoの埋め込みコードを取得
  3. StudioにVimeoのパーツを配置
  4. 動画の埋め込みコードを追加

それぞれ詳しく解説します。

参考:Studioの制作代行サービスとは?費用相場や流れを解説!

手順1.Vimeoに動画をアップロードする

まずはVimeoにアクセスし、アカウントを作成しましょう。

アカウントが作成できたら、「Upload」ボタンから動画をアップロードします。

「Choose files」を選択し、動画をアップロードします。

お好みでサムネイル画像やタグを設定しましょう。

手順2.Vimeoの埋め込みコードを取得

アップロードが完了したら、「Share」ボタンを選択しましょう。

メニューを「Sharing」から「Embed」に変更します。

再生できる場所については、お好みで設定すると良いでしょう。

Vimeoでは、特定のドメイン内でのみ動画を再生することも可能です。

設定が完了したら、「Copy embed code」を選択し、コードをコピーします。

手順3.StudioにVimeoのパーツを配置

Vimeoの埋め込みコードがコピーできたら、Studio上にVimeoパーツを配置しましょう。

左パネルを開き、「追加」→「ボックス」→「Embed」→「Vimeo」を選択し、編集画面上にドラッグ&ドロップします。

手順4.動画の埋め込みコードを追加

Vimeoパーツが配置できたら、先程取得した動画の埋め込みコードをiframeにペーストしましょう。

正しくコードを追加できた場合には、動画のサムネイルが表示されます。

frameの大きさなどはお好みで調整すると良いでしょう。

参考:StudioでInstagramを埋め込む方法

Studioで動画を埋め込むならどっちがいいのか?

無料で動画を埋め込みたいならYoutubeがおすすめ

Youtubeは、無料で動画を埋め込みたい方におすすめです。

また、Youtube動画の公開設定には、限定公開という選択肢もあるため、URLを知っている人だけに動画を公開することも可能です。

しかし、限定公開はURLを知ってさえいれば、動画を閲覧できるというデメリットがあります。

これらのことを踏まえると、無料で誰でも閲覧できる動画を埋め込みたい方には、Youtubeがおすすめです。

特定の人にだけ動画を表示したいならVimeoがおすすめ

Vimeoは、特定の人にだけ動画を表示したい方におすすめです。

Vimeoでは、動画のプライバシー設定を行うことができるため、特定のサイト内でのみ動画再生を可能にするなど柔軟に動画閲覧権限を設定することが可能です。

これらのことを踏まえると、特定の人や特定のサイト内でのみ閲覧可能な動画を埋め込みたい方には、Vimeoがおすすめです。

まとめ

この記事では、Studioで動画を埋め込む方法について解説しました。

YoutubeとVimeo、それぞれの特徴をもとに使い分けることが大切です。

ノクステックでは、以下のような方のお役に立てると思いますので、社内でのサイト制作体制に不安がある方はお気軽にお問い合わせください。

  • 適切なSEO対策を行ったサイトが欲しい
  • デザイン性の高いサイトが欲しい
  • Web知識が少なくても、自社で運用できるサイトが欲しい
自社で運用できるWebサイトが欲しい方へ

執筆者
松永勇樹
ノーコード専門メディア「ノクステック」運営。STUDIO Experts加盟。
Web講座の事業責任者を経て、ノクステックを設立。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次