YouTubeの動画は、埋め込み用コードを取得することでWebサイトやブログに埋め込むことができます。
この記事の目次
YouTube埋め込みコードの取得
動画の再生画面を表示し、動画の右下に表示される「共有」をクリックします。
「共有」画面が表示されたら「埋め込む」をクリックします。
動画を埋め込むためのコードが表示されるので、赤枠の<iframe 〜 </iframe>の箇所をコピーします。
今回は、このように表示されました。
埋め込み用コードのカスタマイズ
埋め込んだ動画のサイズを変更する
アスペクト比（タテ：ヨコの比率が9：16）を保ち、埋め込み用コードの「width=”850″ height=”478″」の箇所を直接書換えます。
サイズを480px x 270pxに変更する場合は下記のように変更します。
<iframe width="480" height="270"
src="https://www.youtube.com/embed/51CH3dPaWX"
frameborder="0" allow="accelerometer; autoplay; encrypted-media;
gyroscope; picture-in-picture" allowfullscreen="allowfullscreen">
</iframe>関連動画を表示させない方法
関連する動画を表示しないように設定するには、「?loop=1&playlist=youtube ID」パラメータを使ってループ再生します。
<iframe width="850" height="478"
src="https://www.youtube.com/embed/51CH3dPaWX?loop=1&playlist=51CH3dPaWX"
frameborder="0" allow="accelerometer; autoplay; encrypted-media;
gyroscope; picture-in-picture" allowfullscreen="allowfullscreen">
</iframe>
Youtubeをレスポンシブに対応させる方法
先程コピーした<iframe 〜 </iframe>を「div」で囲み、「css」を設定します。
<div class="movie-area">
<iframe width="480" height="270"
src="https://www.youtube.com/embed/51CH3dPaWX?rel=0"
frameborder="0" allow="accelerometer; autoplay; encrypted-media;
gyroscope; picture-in-picture" allowfullscreen="allowfullscreen">
</iframe>
</div>.movie-area {
position: relative;
padding-bottom: 56.25%; /*アスペクト比 16:9の場合の縦幅*/
height: 0;
overflow: hidden;
}
.movie-area iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}