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

youtubeをレスポンシブ対応にする

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

テンプレートがレスポンシブ対応だから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にHTMをL登録する

 

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

 

 

Adquick登録タグをクリックする

 

 

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

 

htmlタグに囲まれているyoutubeタグ

 

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

 

レスポンシブ対応のYOUTUBE

 

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

 

まとめ

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

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

 

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