ウェブデザイナーの毎日のお仕事のメモ

作成日:2020.11.12  最終更新日:2021.01.04

CSS

youtubeの埋め込みをレスポンシブ対応させる方法

yotubeをサイトに埋め込むこともよくあるかと思いますが、レスポンシブできれいに表示させるための方法です。

youtubeをレスポンシブで表示させる方法

youtubeの動画埋め込みコードをコピーしてくる

まずはyoutubeの対象の動画を開きます。

動画の下のほうにある『共有ボタン』を押す。

モーダルが立ち上がるので、埋め込みボタンを押す。

iframeのコードが表示されますので、右下のコピーボタンを押してコードをコピーしてください。

HTML

先ほどコピーしてきたコードを使って下記のようにHTMLを準備します。

まず、divなどのブロック要素(今回は .youtubebox というクラス名にしています。適宜、サイトの命名規則に合わせて変更してください。)を準備し、その中に、先ほどyoutubeよりコピーしてきたiframeのコードをペーストしてください。

<div class="youtubebox">
 <iframe width="560" height="315" src="https://www.youtube.com/embed/TPSqnNa-M8U" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

css

.youtubebox {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}

.youtubebox iframe {
  position: absolute;
  top:   0;
  right: 0;
  width: 100%;
  height: 100%;
}

すると、以下のように表示されます。

完成形

ブラウザのサイズを変更して、ブラウザサイズ に対応してyoutubeの表示が変更することをご確認ください。


サンプルページもつくりましたので、下記よりご確認頂けます。

最新記事