YouTube(動画)を入れる

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

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

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

はじめに

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

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

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

Youtubeヘルプセンター

操作の流れ

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

以下の手順で行います。

操作手順1.埋め込みコードの取得

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

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

操作手順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)画面右上[プレビュー]をクリックして、動画が表示されることを確認します

手順は以上です。

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

マニュアル更新情報

2018年8月30日

新機能の追加に伴い、下記のページを追加いたしました。
・書体を変更する

2018年7月2日

新機能の追加に伴い、下記のページを追加いたしました。
共通部品を一部のページのみ非表示にする

2018年7月2日

よくあるご質問ページの「部品・要素の編集について」を更新いたしました。

各種ダウンロード資料

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

A4カラー印刷用

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