STINGER5におけるiframeの下の空白をなくす

iframeを入れたときに下に空白ができるのがずっと気になってたんだけど…対処したのでその方法をあげておくね。

原因

参考サイトの受け売りなんだけど…。どうやらiframeを埋め込むと「＜div class=”youtube-container”＞」ってタグが埋め込まれるらしいんだよ。じゃあ、スタイルシートで「youtube-container」がどう定義されているかというと…「padding-bottom: 56.25%;」って定義されているんだ…。これによって下に空白ができているってことみたいなんだ。

対処

現状「iframe」を使うと無条件に「＜div class=”youtube-container”＞」が追加されてしまうのを、「youtube.com」が入っているときだけ「＜div class=”youtube-container”＞」が追加されるように修正するよ。（修正前にバックアップをしようね。僕はしなかったせいで危うくサイトを壊すところだったよ…）

1. Wordpressのダッシュボードを開いてね。
2. 左のメニューから「外観」→「テーマの編集」を選択してね。
3. 右のファイル一覧から「テーマのための関数 (functions.php)」を選択してね。
4. ソースが表示されたら、以下の部分を探してね。

   //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');
   

5. 上のソースを以下のように修正してね。

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

6. 修正が完了したら画面下の「ファイルを更新」ボタンをクリックしてね。

参考サイト

【WordPress】STINGER5にiframeを埋め込むと空白のスペースが生まれるの解決方法 | ente‐will