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

YouTube動画を埋め込む方法

YouTubeチャンネル全体やショート動画、またハッシュタグ付きの動画を取得し、サイトに表示させる方法を解説します。

対応者:Yuko
今週アップデートされました

YouTube動画は企業のマーケティング戦略に欠かせない要素であり、Webサイトでの活用は視聴者拡大に有効です。公式の埋め込みコードでは動画を表示できますが、複数の動画の表示や自動更新には適していません。

EmbedSocialならYouTube APIと連携し、最新動画を自動で取得・更新 できるため、一度設置すれば常に最新のコンテンツを、WEBサイトのデザインに最適な洗練されたデザインで表示することができます。

全体の流れは以下の動画でご確認いただけます。

以下、各ステップの詳細を紹介します。

1. テンプレートの選択

EmbedSocialnにログイン後、左側のメインメニューから「テンプレート」ページに進み、好みのレイアウトのテンプレートを選びます。

デザインテンプレートの種類

テンプレートページで表示されるテンプレートの種類は以下の通りです:

デザインテンプレートの種類

  • 「自分で一から作る・AIで始める」を選択すると、テンプレートを使わず、自然言語でウィジェットのデザインを指示しながらデザインすることができます(バイブコーディング)。

  • AIアイコン✨がついたテンプレートを選ぶと、テンプレートをベースに自然言語でAIと会話しながらデザインを調整することができます。

  • 一般のテンプレートを選ぶと、テンプレートをベースに様々なデザインオプションをマニュアルで設定しながらデザインを調整できます。(従来の編集方法)

この記事では、「AIアイコン✨がついたテンプレート」の一つを選んで進みます。

テンプレートの選択

2. ソースの接続

ウィジェットの編集画面に自動で進みます。編集ページ上部の「ソースを接続してください」をクリックし、動画元の設定画面へ進みます。

ソースの接続

3. ソースタイプの選択

WEBサイトに表示したい動画の種類を選び、「次へ」をクリックします。

EmbedSocialでは以下のYouTube動画を収集できます。

  • チャンネル全体

  • プレイリスト

  • ハッシュタグ付き動画

  • ショート

  • ライブ動画

ソースタイプの選択

4. YouTubeアカウントURLやハッシュタグの指定

YouTubeチャンネルやプレイリスト、ショート動画やライブ動画を選択した場合はそれぞれのURLを入力し、EmbedSocialと接続させます。ハッシュタグを選択した場合はハッシュタグを指定します。

YouTubeチャンネルの接続

5. ウィジェットデザインの編集

AIデザイン機能を使用し、AIとチャットしながらデザインを調整することができます。「文字のフォントサイズを小さくして」「ユーザー名や日付は決して」など、自然言語で入力していただくだけで最適なデザインに修正します。

AIデザインの調整

一般のテンプレートを選択した場合は、様々な編集オプションメニューが表示されますので、お好みのデザインになるようそれぞれ調整をします。

オプション編集 1:モデレーション

「モデレーション」タブでは、サイトに表示する動画を個別に選択することができます。

モデレーションの設定

オプション編集 2:並べ替え

「並べ替え」タブでは、WEBサイトに表示する動画の順番を指定できます。

動画の並べ替え

オプション編集 3:リンクとCTAの設定

「リンク」タブでは、各動画に商品タグやCTAを設置できます。

リンクとCTAの設定

各種編集を行った際には、必ず右上の「保存」ボタンをクリックして変更内容を確定させて下さい。

6. 埋め込みコードの取得

編集が終わったら、画面左上のアイコンをクリックして埋め込みメニューを開きます。

埋め込みメニューの開始

お使いのWEBサイトビルダーに合う埋め込み用のコードのタイプを選びます。

コードタイプの選択

埋め込み用コードをコピーして、あなたのWebサイトに貼り付けるだけで、動画の表示・更新が自動で行われます。

コードのコピーと貼り付け

設定は以上です。

操作方法についてのご質問はこのページの右下のチャットサポートまでお問い合わせください。 サブスクリプション・ご契約等に関するお問い合わせは、セールスチームまでお問い合わせください。

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