今まで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>
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; }
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&showinfo=0&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; }