YouTube動画をワードプレスでレスポンシブ対応する方法

U-TILLY

5年前

This post is also available in: English

1 はじめに
- 1.1 レスポンシブとは
2 YouTube動画をレスポンシブ対応させる対応
- 2.1 CSSを追加
- 2.2 投稿画面でコードを追加
3 最後に

はじめに

ワードプレスなどのサイトにおいて、レスポンシブ対応が直近では主流になっていますが、本記事では特にYouTube動画をレスポンシブ対応させる方法をお伝えします。

レスポンシブとは

レスポンシブデザインに関してはGoogleの開発者サイトでは以下のように定義されています。Googleとしても推奨する手法です。

ユーザーのデバイスの種類（パソコン、タブレット、モバイル、非視覚的ブラウザ）に関係なく、同じ URL で同じ HTML コードを配信しつつ、画面サイズに応じてレンダリング方法を変更します。レスポンシブウェブデザインは、Google がおすすめする設計方法です。（Google開発者サイトより）

YouTube動画をレスポンシブ対応させる対応

それでは早速YouTube動画をレスポンシブ対応させる方法を紹介します。

CSSを追加

まずはワードプレスで設定をします。

外観 > テーマエディタからCSSの編集画面を出します。

ここに以下のCSSを追記します。

.youtube {
position: relative;
width: 100%;
padding-top: 56.25%;
}
.youtube iframe {
position: absolute;
top: 0;
right: 0;
width: 100% !important;
height: 100% !important;
}

今回は便宜的に”youtube1”と追記します。

CSSでiframe要素の幅と高さを100%にします。

また、位置をabsoluteにしているようなイメージになります。

以上でCSSの追記は終了です。