こないだSTINGER5を使ってるブログ（そういえばこのブログもそうでした）にiframeを利用したコンテンツを貼り付けたら妙な空白ができてしまい困りました。
調べてみるとiframeを使ってる箇所にはcssで「youtube-container」というclassが自動的に指定されてしまい、その結果妙な空きスペースができていたようです。
さて、どうにか解決方法はないかなとググってみたら「【STINGER5】YouTube以外のiframe要素にレスポンシブ対応用のclassが付かにようにする方法 | Taka’s Life」という記事に解決方法と解説が書かれていました。
要するにiframeで読み込むコンテンツのドメインを判別してYouTubeから（Instagramも）読み込まれた要素にだけ別途classを指定するということですね。
なるほど勉強になりました。ありがとうございます。
解決方法
まずSTINGER5の「function.php」を開き、「//iframeのレスポンシブ対応」と書いてある部分を探します。
[php]//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’);[/php]
これを以下のように書き替えます。
[php]//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);
//Instagram動画にラッパーを装着
$the_content = preg_replace(‘/<iframe[^>]+?instagram\.com[^<]+?<\/iframe>/is’, ‘<div class="instagram-container"><div class="instagram">${0}</div></div>’, $the_content);
}
return $the_content;
}
add_filter(‘the_content’,’wrap_iframe_in_div’);[/php]
次に必要ならInstagram用のcssをSTINGER5の「style.css」に追加します。
[css]/* instagram */
/*動画の最大幅を指定する*/
.instagram-container{
max-width:640px;
}
/*Instagramの大きさを調整*/
.instagram {
position: relative;
padding-bottom: 120%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
/*動画を囲んでいるdiv目一杯に広げる*/
.instagram iframe,
.instagram object,
.instagram embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}[/css]
これでiframeを使用したコンテンツが正常に表示されるようになるはずです。
結果
iframeを利用したコンテンツの場合、例えばアフィリエイト広告。
YouTubeの動画の場合。
Instagramの動画もほれこの通り。
コメント