今までYoutubeといえば、iframeが一般的だったけど、
WordPressのoEmbedっていう機能で、自動的にアイフレームに切り替えてくれるみたい。
↓記事内にURLをいれると…
※共通リンクでも、ツールバーに表示されてるURLでもどっちでもOK
↓こうなる
1 | < 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が追加される
↓こんな感じ
1 | < 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を追加するだけ
6 | padding-bottom : 56.25% ; |
10 | .embed-youtube iframe { |
【2】JetPackが入っていない場合はfunctions.phpをちょっといじる
functions.phpに下記のコードを追加
2 | function custom_youtube_oembed( $code ){ |
3 | if ( strpos ( $code , 'youtu.be' ) !== false || strpos ( $code , 'youtube.com' ) !== false){ |
4 | $html = preg_replace( "@src=(['\"])?([^'\">\s]*)@" , "src=$1$2&showinfo=0&rel=0" , $code ); |
5 | $html = preg_replace( '/ width="\d+"/' , '' , $html ); |
6 | $html = preg_replace( '/ height="\d+"/' , '' , $html ); |
7 | $html = '<div class="youtube">' . $html . '</div>' ; |
14 | add_filter( 'embed_handler_html' , 'custom_youtube_oembed' ); |
15 | add_filter( 'embed_oembed_html' , 'custom_youtube_oembed' ); |
これで、抽出されるHTMLをはこうなる
あとは、CSSを追記(class名以外さっきと同じ)
6 | padding-bottom : 56.25% ; |
参考サイト