AMS使い方マニュアル

簡単ホームページ作成ツール「AMS」のマニュアルサイト

ホーム ≫ ページ内にYoutube動画を表示させたい ≫

[ケーススタディ]
ページ内にYouTubeを埋め込む

ケーススタディ

YouTubeで公開している事業サービス紹介の動画を求人情報ページ内に埋め込みたい。

事前準備

ホームページに動画(YouTubeに限る)を埋め込むには、事前にYouTubeに動画をアップロードしておく必要があります。

1.AMSにログインし、スクリプト使用許諾を確認する

AMSにログインし、「スクリプト使用許諾」にチェックが入っているかを確認します。

チェックが入っていない場合は、チェックを入れます。

スクリプト使用許諾にチェックが入っていないと、YouTube動画を埋め込むことができません。

2.YouTubeの動画ページにアクセスする

Youtube動画を埋め込む01

埋め込みたい動画が公開されているYouTubeのページにアクセスします。

Youtube動画を埋め込む07

動画画面の下にある「共有」をクリックします。

3.埋め込みコードを取得する

Youtube動画を埋め込む03

埋め込む」をクリックします。

Youtube動画を埋め込む05

画面右下の「コピー」をクリックして、画面を閉じます。

YouTube側の作業はこれで終わりです。

4.記事を追加する

ページ記事追加01_コピー

動画を埋め込むページ(ここでは求人情報ページ)の編集画面で、一番上の記事にカーソルを置きます。背景が黄緑色になったらクリックします。

ページ記事追加03_コピー

記事を追加」ボタンをクリックします。

Youtube動画を埋め込む09

本文」の「ソース」ボタンをクリックします。

5.YouTube埋め込みコードを入力する

Youtube動画を埋め込む10

テキストエリア内をクリックします。

iframeを埋め込む

続けて、テキストエリア内を右クリックします。

表示されるメニューから「貼り付け」を選択します。

Youtube動画を埋め込む13
YouTubeの埋め込みコードが入力されました。

6.埋め込みコードの値を編集する

Youtube動画を埋め込む14
width(動画の横幅)の初期値は560ですが、これを100%に変更します。
Youtube動画を埋め込む15

widthを100%に変更したら、埋め込み作業は完了です。

編集画面左下の「登録」ボタンを押します。

さらに、記事一覧編集画面の「登録」ボタンも押します。

7.編集画面で確認する

Youtube動画を埋め込む16

編集画面に戻ると、「オブジェクトスペース」として表示されます。正常に埋め込みコードが入っていても、編集画面上に動画は表示されません

動画はプレビューで確認します。

8.プレビューで確認する

Youtube動画を埋め込む17

画面右上の「プレビュー」ボタンを押します。

動画を埋め込んだページに動画が表示され、再生できれば埋め込み完了です。

公開ボタン押しましょう

最後に「公開」ボタンをクリックして、修正内容を反映させます。

otukaresamadesita