YouTube(動画)を入れる

Youtubeにアップされている動画を、ホームページに入れる方法をご案内します。

YouTubeは、他社が運営するサービスです。そのため、予告なく仕様や操作手順が変更となる場合があります。ご利用の際には、YouTubeが提供している最新情報ページやヘルプページなどをご確認ください。サービスの詳細などは、YouTubeへお問い合せください。

以下の情報は、2023年4月現在の情報です。

はじめに

YouTubeを利用するには、アカウント登録が必要です。

また自分で撮影した動画をホームページに掲載したい場合、YouTubeへのアップロードが必要です。

アカウントの登録方法や、動画のアップロード方法は、YouTubeのヘルプセンターにてご確認ください

Youtubeヘルプセンター

操作の流れ

ページ内に動画を入れるために、まず、Youtubeの画面で「埋め込みコード」を取得します。その後、取得したコードを部品に追加します。

以下より該当の動画手順を選択の上、ご確認ください。

YouTube動画(60秒以上)の埋め込みをする方法

操作手順1.埋め込みコードの取得
  • YouTubeにログインし、ホームページに入れたい動画を開いておきます。

1)「共有」をクリックします

2)「埋め込みコード」をクリックします

3)埋め込みコードをコピーします

操作手順2.HTML部品を追加する

動画を入れたいページにHTML部品を追加します。

  • ホームページ更新画面で、動画を入れたいページを開いておいてください。

1上パネルで[+部品を追加する]ボタンをクリックし、動画を入れたい場所の[ここに追加]バーをクリックします

2)[HTML]>[HTML]部品を選択し、[この部品を追加する]ボタンをクリックします

HTML表示の横に文章を入れたい場合は、「中見出し+文章+HTML」を選択します

→編集エリアにHTML部品が入ります

操作手順3.HTML部品に埋め込みコードを追加する

操作手順2で追加したHTML部品に、操作手順1でコピーした埋め込みコードを追加します。

1)編集エリアのHTML部品の黒い四角部分をクリックして、右パネルを表示します。

→右パネル内にHTML入力欄が表示されます

2)HTML欄の上で右クリックし、「貼り付け」をクリックします

→コピーした埋め込みコードが貼り付けられます

【上級者向け】動画の表示サイズを変更する

動画の表示サイズを変更したい場合、コード内の以下の数値を書き換えます。

<iframe width="数値" height="数値"

※widthは横幅 heightは縦幅です
単位はpx(ピクセル)で記入します
※半角数字で記入します

3)部品内に、YouTubeの動画の埋め込みコードが表示されていることを確認します

※編集エリアには動画は表示されません。

4)入力欄以外の箇所をクリックして、確定します

→入力内容がサーバーに保存されます

5)画面右上[プレビュー]をクリックして、動画が表示されることを確認します

手順は以上です。

  • 更新した内容をホームページに反映させるには、左パネルで、更新したページの[更新]ボタンをクリックします。

YouTubeショート動画の埋め込みをする方法

操作手順1.埋め込みコードの取得
  • YouTubeにログインし、ホームページに入れたい動画を開いておきます。

1)ショート動画上で右クリックします

2)「埋め込みコードをコピー」をクリックします

※ショート動画側の設定で埋め込みを許可していない場合、下記項目が表示されない等の制限があるようです。「埋め込みコードをコピー」が表示された場合、埋め込みが可能です。

3)埋め込みコードがコピーされます

操作手順2.HTML部品を追加する

動画を入れたいページにHTML部品を追加します。

  • ホームページ更新画面で、動画を入れたいページを開いておいてください。

1上パネルで[+部品を追加する]ボタンをクリックし、動画を入れたい場所の[ここに追加]バーをクリックします

2)[HTML]>[HTML]部品を選択し、[この部品を追加する]ボタンをクリックします

HTML表示の横に文章を入れたい場合は、「中見出し+文章+HTML」を選択します

→編集エリアにHTML部品が入ります

操作手順3.HTML部品に埋め込みコードを追加する

操作手順2で追加したHTML部品に、操作手順1でコピーした埋め込みコードを追加します。

1)編集エリアのHTML部品の黒い四角部分をクリックして、右パネルを表示します。

→右パネル内にHTML入力欄が表示されます

2)HTML欄の上で右クリックし、「貼り付け」をクリックします

→コピーした埋め込みコードが貼り付けられます

【上級者向け】動画の表示サイズを変更する

動画の表示サイズを変更したい場合、コード内の以下の数値を書き換えます。

<iframe width="数値" height="数値"

※widthは横幅 heightは縦幅です
単位はpx(ピクセル)で記入します
※半角数字で記入します

3)部品内に、YouTubeのショート動画の埋め込みコードが表示されていることを確認します

※編集エリアには動画は表示されません。

4)入力欄以外の箇所をクリックして、確定します

5)画面右上[プレビュー]をクリックして、動画が表示されることを確認します

手順は以上です。

  • 更新した内容をホームページに反映させるには、左パネルで、更新したページの[更新]ボタンをクリックします。

マニュアル更新情報

2024年2月21日

スマホサイトに関するマニュアルを更新いたしました。
スマホサイトに関わる設定

2023年2月20日

GoogleAnalyticsの仕様変更に伴い、下記のページを追加いたしました。
・GoogleAnalyticsの最新版を追加で設定する
※すでにGoogleAnalyticsに登録済みの方向け

各種ダウンロード資料

ホームページ更新画面の
基本操作(印刷版PDF資料)

A4カラー印刷用

印刷版PDFはこちらをクリック