まだまだ需要のあるYouTube埋め込み方法【コピペOK】

最近はプラグインや初めからテーマのブロックで準備されている事が多いので、あまりカスタマイズする必要が無くなってきましたが、クライアントワークの中ではまだまだ埋め込みの需要があります。

少し前までは「YouTubeレスポンシブ　埋め込み」など、レスポンシブに対応させるためのGoogle検索で良く出てきた方法で「padding」を使ったものが主流でしたが、最近はアスペクト比で設定する方がベターになってきてます。
アスペクト比もGoole検索すると直ぐに見つかると思うので備忘録記事です。

• YouTubeをサイトに埋め込む方法が分かる
• PCとスマートフォンで最適なYouTubeの埋め込み方法が分かる

YouTubeをWEBサイトに埋め込むCSS

CSSをコピペで使えますが実用的には更に、メディアクエリや、JavaScriptなどでプラットフォームやデバイスのユーザーエージェントを使った切り替えなどを組み合わせてください。

コピペでどうぞ

/*スマホの場合*/
.youtube-sp {
	width: 100%;
	aspect-ratio: 16 / 9;
}
.youtube-sp iframe {
	width: 100%;
	height: 100%;
}
/*PCの場合*/
.youtube-pc {
	position: relative;
	width: 100%;
	padding-top: 56.25%;
}
.youtube-pc iframe {
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	height: 100%;
}

最後に

アスペクト比でのCSSはPCでは未対応のブラウザもあるので、とりあえずクラスで切り分けた方が安全。

最近ではレスポンシブ構造が当たり前になってきてますが、PCとスマホが別ソースなものもあるので、CSSを独自で入れ込む需要はまだ続きそうです。