WordPressで特定の幅や高さを「あらかじめ」指定してYouTubeなどを埋め込む方法

WordPressに動画などを貼り付ける時は、埋め込み機能を使うと便利ですよね~。関連する内容を先日書きましたので、以下のページもあわせてご参考ください。

それで、埋め込んだ時の動画のサイズってどうしていますか。例えば、WordPressの投稿や固定ページの入力欄にYouTubeの動画URLを貼り付けるじゃないですか。

YouTubeの動画URLを貼り付ける

https://www.youtube.com/watch?v=n24zp_wPC7E

すると、下のように自動で埋め込まれますね。

htmlコードはこれ

<iframe width="500" height="281" src="https://www.youtube.com/embed/n24zp_wPC7E?feature=oembed" frameborder="0" allowfullscreen=""></iframe>

上のhtmlコードを見ると、動画のサイズは幅500×高さ281(ピクセル)になっています(※使用するWordPressテーマの「functions.php」に記載されている「Content_Width」などの値によってサイズはまちまちだと思います)。 それで、この埋め込まれたときの幅と高さを自由に変更したい場合は、以下の方法でできます。

ショートコード「embed」を使って、サイズを指定して埋め込む

ショートコード「embed」でYoutubeのurlを囲んで「width(幅)」と「height(高さ)」の値を設定すると、サイズを指定して埋め込むことができます。下の動画は、幅680×高さ383(ピクセル)で指定して埋め込みました。

ショートコード「embed」を使ってサイズ指定

ショートコード「embed」を使う具体的な方法は、埋め込み機能のページにも書いてありますので、そちらでご確認ください。 ここまでが前提で、以下が本題です。

ショートコードを使わずに「あらかじめ」指定しておきたい

例えば「埋め込んだ動画などのサイズは、コンテンツ幅いっぱいに表示されると見栄えがいいな~」と思ったとして、埋め込みたい動画があるたびに毎回「embed」で囲んでサイズ指定するのは・・・ちょっと手間だと思いました。 そこで、下のコードを「functions.php」に追記すると、埋め込みサイズをあらかじめ指定できます。

function custom_embed_size() {
 return array( 'width' => 680, 'height' => 383 );
}
add_filter( 'embed_defaults', 'custom_embed_size' );

やっていること

フィルターフック「embed_defaults」を使って、埋め込みのサイズを幅680×高さ383(ピクセル)に指定している、単純な仕組みです。(数字はご使用のWordPressテーマによってお好みで変更ください)

「embed」とうまく使い分けるといい感じです

上記のコードも使いつつ、特定の投稿や固定ページごとに埋め込みのサイズを変更したい場合は「embed」で使い分けを行えばOKですね。「デフォルトでは指定したサイズで埋め込みができて、お好みで変更もできるよ」という感じです。

まとめ

フィルターフック「embed_defaults」を使った方法を書きましたが、場合によっては「Content_Width」を使ってもいいかもです。その辺は、また機会を見つけてメモ書こうと思います。 以上、何かのご参考となりましたら幸いです。

著者:bouya Imamura