YouTubeを埋め込む
STEP
表示させたいYouTubeの動画を検索する
まずは通常どおり動画をYouTubeで検索します。（動画にモザイクかけると怪しくなりますが、変な動画ではありません。）
STEP
共有ボタンをクリックする
サムネイル一覧の場合は、タイトル横のメニューの中にある「共有」をクリックします。
動画再生画面の場合は、再生されている動画のタイトルの下にある「共有」をクリックします。
STEP
「埋め込む」を選択する
共有ボタンをクリックするとポップアップメニューが出てくるので、その中から「埋め込む」を選びます。
STEP
表示されたiframeタグをコピーする
iframeタグが表示されるのでコピーします。
STEP
WebサイトのHTMLにiframeタグをペーストする
コピーしたiframeタグを動画を埋め込みたいWebサイトの表示させたい位置にペーストします。
埋め込むとこのように表示されます。
STEP
iframeタグの一部を削除する
CSSでサイズ調整するために、iframe内のwidth・height・frameborderを削除します。
削除するとサイズが変わります。
STEP
CSSでサイズを調整する
CSSで表示させるサイズを調整します。
今回は横400px縦300pxで中央揃えで表示させます。上下の余白も100pxずつ取ります。
YouTubeの動画を埋め込むことができました。
おわりに
最近ではお店や企業などでもYouTubeチャンネルを持っている場合が増え、サイトに動画が埋め込まれているのをよく見かけるようになりました。
慣れればすぐにできるようになると思うので、ぜひ覚えて使えるようになりましょう！
