WEB系キャンパス

WorPressでYoutubeの埋め込みのレスポンシブ対応する2つの方法

今までYoutubeといえば、iframeが一般的だったけど、
WordPressのoEmbedっていう機能で、自動的にアイフレームに切り替えてくれるみたい。

↓記事内にURLをいれると…

H(←本当は小文字)ttps://youtu.be/OmsAkXakEuA

※共通リンクでも、ツールバーに表示されてるURLでもどっちでもOK

↓こうなる

<p><iframe width="560" height="315" src="https://www.youtube.com/embed/OmsAkXakEuA" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></p>

【1】JetPackが入ってる場合はCSSを追加するのみ

JetPackが入っている場合は、YoutubeのURLをいれるだけで、自動的にiframeの前後にclassが追加される

↓こんな感じ

<p><span class='embed-youtube' style='text-align:center; display: block;'><iframe width="560" height="315" src="https://www.youtube.com/embed/OmsAkXakEuA" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></span></p>

あとはCSSを追加するだけ

.embed-youtube {
    position: relative;
    display: block;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
    overflow: hidden;
    margin-bottom: 25px;
}
.embed-youtube iframe {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

【2】JetPackが入っていない場合はfunctions.phpをちょっといじる

functions.phpに下記のコードを追加

//YouTubeのURLにclassを付与
function custom_youtube_oembed($code){
  if(strpos($code, 'youtu.be') !== false || strpos($code, 'youtube.com') !== false){
    $html = preg_replace("@src=(['\"])?([^'\">\s]*)@", "src=$1$2&showinfo=0&rel=0", $code);
    $html = preg_replace('/ width="\d+"/', '', $html);
    $html = preg_replace('/ height="\d+"/', '', $html);
    $html = '<div class="youtube">' . $html . '</div>';

    return $html;
  }
  return $code;
}

add_filter('embed_handler_html', 'custom_youtube_oembed');
add_filter('embed_oembed_html', 'custom_youtube_oembed');

これで、抽出されるHTMLをはこうなる

<div class="youtube">
 <iframe src="https://www.youtube.com/embed/OmsAkXakEuA?feature=oembed&#038;showinfo=0&#038;rel=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

あとは、CSSを追記(class名以外さっきと同じ)

.youtube {
    position: relative;
    display: block;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
    overflow: hidden;
    margin-bottom: 25px;
}
.youtube iframe {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

参考サイト

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です