はぴすぷ

【STINGER5】iframeの表示サイズがおかしくなるのを直す方法

      2015/09/22

少し前から外部サイトの埋め込みタグを貼り付けた時に、何かレイアウト崩れてるなーと思っていました。
多少のズレだったからそこまで気にしてしなかったんですが、前回書いた以下の記事で使用した一部の埋め込みタグだけやたら隙間が空いたんですよ。
pixiv埋め込みタグ(ブログパーツ)の使い方とサンプル。黒歴史(昔の同人誌・イラスト)公開
pixiv埋め込みタグの使い方とサンプル。かわいいイラストの依頼ならこの人に！

SS_0328

こんな感じ。

なんか自分で貼り付けたiframeの外側に<div class=“youtube-container”>なるものがくっついている。

スタイルを見ると

/* iframeのレスポンシブ */
.youtube-container {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
}
.youtube-container iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

どうやら、レスポンシブ対応したいらしい。
名前からしてyoutubeがいい感じに表示されるんでしょう。

でもpixivでの表示が残念過ぎるので何とかしたい。

それっぽい記事を見つけた。
WordPressで「特定のURLが含まれたiframe動画」のみをレスポンシブ表示する方法

function.phpで全てのiframeに<div class=“youtube-container”>を付けてしまっている。

スポンサーリンク

function.php

デフォルト

全てのiframeの開始タグと閉じタグで、別々に<div class=“youtube-container”>で包もうとしている。
iframe前後にスペース入れられること想定されてるけど、そんなの見たことないからいらないかなー。

//iframeのレスポンシブ対応
function wrap_iframe_in_div($the_content) {
  if ( is_singular() ) {
    $the_content = preg_replace('/< *?iframe/i', '<div class="youtube-container"><iframe', $the_content);
    $the_content = preg_replace('/<\/ *?iframe *?>/i', '</iframe></div>', $the_content);
  }
  return $the_content;
}
add_filter('the_content','wrap_iframe_in_div');

対処

一回の正規表現でyoutubeのアドレスを含むiframeなら、<div class=“youtube-container”>で包むように変更。
参考にしたサイトではInstagramにも対応してたけど、使う予定ないのでyoutubeだけにした。

//iframeのレスポンシブ対応
function wrap_iframe_in_div($the_content) {
  if ( is_singular() ) {
    // YouTube動画にラッパーを装着
    $the_content = preg_replace('/<iframe[^>]+?youtube\.com[^<]+?<\/iframe>/is', '<div class="youtube-container">${0}</div>', $the_content);
  }
  return $the_content;
}
add_filter('the_content','wrap_iframe_in_div');

 

これでyoutubeのinframeだけに<div class=“youtube-container”>が付くようになります。
実際にyoutube埋め込むと以下のようになり、ブラウザの幅をいじってもいい感じにサイズに変わります。
※ちなみにこの動画は私が初めてカット・繋ぎ以外の動画編集をした処女作ですｗ

普通のiframeはそのままなので、pixivもレスポンシブ対応させようと思ったんですが、私では力及ばずでした。
分かる方いたらコメントにて教えて頂けると嬉しいです(´・ω・｀)

スタイルシートちゃんと勉強しないとなー。

 - STINGER, WordPress, 外部サイト連携