まだまだ需要のある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を独自で入れ込む需要はまだ続きそうです。

<ご注意>上記の紹介は、提供者や販売・運営者様及びその企業を差別や批判するものではありません。個人的な見解結果としての紹介となりますので、最終判断は皆さまご自身でお願いいたします。また、掲載内容は変更されていくのでこの記事記載日以降は内容が異なる場合もあります事ご了承ください。

楽天市場で注目の商品![ sponsored ]

  • URLをコピーしました!
目次