Youtubeの動画をブログに埋め込みレスポンシブに対応させる|ホームページ(WEB)制作 長野県:諏訪市・茅野市・岡谷市・松本市のスタジオハロー

メニュー 閉じる

TIPS

Youtubeの動画をブログに埋め込みレスポンシブに対応させる

YouTubeの動画は、埋め込み用コードを取得することでWebサイトやブログに埋め込むことができます。

YouTube埋め込みコードの取得

動画の再生画面を表示し、動画の右下に表示される「共有」をクリックします。

youtube埋め込み方法

「共有」画面が表示されたら「埋め込む」をクリックします。

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%;
}
Posted in ホームページ制作-TIPS

関連記事