WordPressはレスポンシブ対応でもYouTubeがレスポンシブ対応でない時の対策

WordPressで記事を書くとき、YouTube動画を貼り付けた経験は誰にもあるでしょうネ!

テンプレートがレスポンシブ対応だからYouTubeもレスポンシブ対応になっていると疑いもせず、思っていたのに・・・。

 

 

PC画面では画面内に収まっているのにスマホでチェックしてみると、上の画像のように画面からはみ出していました!

そんな経験したことあるんじゃないんでしょうか。テンプレートはレスポンシブ対応でも、youtubeは対応していないということになります。

 

そんな状態に困っているあなたに、YouTubeを簡単にレスポンシブ対応にする方法についてお伝えします。

 

 

作業は次の手順で行います。

 

YouTubeをレスポンシブ対応にする手順は簡単
  1. プラグイン「Simple Custom CSS」をインストールする。
  2. ダッシュボードの外観の中にカスタムCSSができるので、カスタムCSSにCSSを貼り付ける。
  3. Adquickにhtmlタグを登録すると便利

 

 

1.プラグイン「Simple Custom CSS」をインストールする。

 

Simple Custom CSSプラグインをインストールする

プラグイン「Simple Custom CSS」をインストールします。

 

 

2.カスタムCSSにCSSを貼り付ける。

 

ダッシュボード>外観>カスタムCSSが出来ているので、次のCSSを貼り付けます。

 

CSS

CSS

CSS

.youtube {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}

.youtube iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

 

3.Adquickにhtmlタグを登録すると便利

 

プラグイン「Adquick」をインストールしてなければ、しておきましょう。

これに、htmlタグを登録すると便利だからです。

 

html

<div class=”youtube”>
<iframe ・・・・> </iframe>
</div>

 

 

 

 

赤字の部分を「Adquick」に登録しましょう。

 

 

 

 

使い方は、YOUTUBEの画像をクリックしてから、上の画像のように「Adquick」に登録したタグをクリックしましょう。

 

 

すると、編集画面のテキストエディターを確認すると、youtubeのタグが、<iframe・・・></iframe>で囲まれているのを確認できます。

 

 

これでyoutubeがレスポンシブ化されたことを確認できました。

 

まとめ

使っているWordPressのテンプレートがレスポンシブ対応でも、youtubeはそうではない事があります。

その時には、cssを設定することで簡単にyoutubeをレスポンシブ対応にできます。

 

コメントは受け付けていません。