トップページ
Webデザイン情報
WordPress Tips
[WordPress]Youtube埋め込み動画とAmazonアソシエイト広告を同時にレスポンシブ対応して表示する手法

[WordPress]Youtube埋め込み動画とAmazonアソシエイト広告を同時にレスポンシブ対応して表示する手法

2021.03.05
WordPress Tips

Sponserd link

そこそこの需要があると思うんですが、あまり情報が出回っていないので備忘録として。

この記事の目次

Youtube埋め込み動画とAmazon広告を同時にレスポンシブ対応して表示する手法

Youtube埋め込み動画はそのまま貼り付けるとスマホ表示ではみ出ちゃう

例えば記事にYouTubeの動画を埋め込むことがありますよね。ほとんどの場合はYouTubeで埋め込みコードを取得して記事に貼り付けると思うんですが、そのまま貼るとスマホで見た時にはみ出してしまうことがあります。

<div>タグで囲んでレスポンシブ対応

そこでYoutube動画を<div>タグで囲ってレスポンシブ表示させる、というのはよくある話。基本的には以下の様なHTML・CSSで実装すると思います。

HTML

<div class=“youtube”>
  <iframe src="https://www.youtube.com/embed/○○○○○○○○○○○" width="560" height="315" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
</div>

CSS

.youtube {
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
  position: relative;
}

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

しかしクライアントワークにおいて「記事を書く時にしてほしいこと」として「Youtubeを貼り付けるときは<div>タグで囲ってください」なんて言ったってクライアントさんは困ると思いますし実際のところその通りにしていただけるとは限りません。

自動で<div>タグで<iframe>を囲う記述を追加！でも・・・

そこでfunctions.phpへの記述で、記事内に<iframe>がある場合には<div>タグを自動で囲うように挿入するという手法を取りました。しかしこれもちょっと困りもの。

確かに<iframe>が記事内にある場合にそれを囲うように<div>タグが挿入されます。しかし、同じ記事内に貼っていたAmazonの広告にも<div>タグが挿入されてしまってcssの「padding-bottom: 56.25%;」が効いてAmazon広告の下に広大な余白ができてしまいました笑

これを回避するには前述の<div>自動挿入を貼り付けられたYoutubeの埋め込み動画だけに反映させるように記述しなきゃいけないですね。

Youtubeの動画だけに<div>タグを挿入する

調べていたらこれだ！という記事を見つけました。
概ね考えていたものと同じでした。

参考ページ：WordPressで「特定のURLが含まれたiframe動画」のみをレスポンシブ表示する方法

つまり正規表現の判別によって条件に合う<iframe>のみに<div>タグを挿入するというもの。

実際に記述した内容

以下をfunctions.phpに記述。

PHP

function iframe_into_div($the_content) {
  if ( is_singular() ) {
    $the_content = preg_replace('/<iframe[^>]*src\s*=\s*"?https?:\/\/[^\s"\/]*youtube.com(?:\/[^\s"]*)?"?[^>]*>.*?<\/iframe>/', '<div class="youtube">${0}</div>', $the_content);
  }
  return $the_content;
}
add_filter('the_content','iframe_into_div');

これでYoutubeの埋め込み動画のみに<div>タグを挿入することに成功しました。
そしてAmazonアソシエイト広告はそのまま貼ることができますね。

実際の動きは以下のページで確認を・・・。