「続きを表示する」を使ってYouTubeを埋め込んでみましょう

◆YouTubeを埋め込む

サイトに動画を表示させたい場合、以下の2つの方法があります。

① 動画を直接埋め込む⇒サイトの読み込みが遅くなる＆ページ内の動画を一度に表示させようとするからから非推奨
② YouTubeからの埋め込みコードを使ってリンクさせる⇒アカウントを取って云々かんぬんの作業は必要になりますが、読み込みは楽＆サーバ内のサイトの使用量に負担がかからないので推奨

1．YouTubeから埋め込みコードを取得してきます。

YouTube練習用UTL：https://www.youtube.com/watch?v=c0R4rCz2mOk
※動画が表示されたら一時停止⇒右クリック⇒「埋め込みコードをコピー」

2．の「メディアの挿入/編集」ボタン⇒「埋め込み」にそれをペーストして保存します。

3．そのままではレスポンシブにならないので、以下の方法で修正します。

① （必要に応じて入力画面を広げて）カーソルの位置を確認します。

② 動画を一度押下します。（動画の周囲に青い枠が出ます。）

③ 一度左矢印キーを押下します。

④ 青枠が消え、カーソルが画像の前に移動したのを確認します。
 （赤い線の部分）

⑤ カーソルの位置を確認したら、そのままメニューの「段落」⇒「埋め込み用レスボンシブ 縦横比 16by9」を選択します。

⑥ 埋め込んだYouTubeがレスポンシブ（枠内に収まっている）になれば完成です。

うまくレスポンシブにならない場合は、①からやり直してみましょう。