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」を使ってもいいかもです。その辺は、また機会を見つけてメモ書こうと思います。 以上、何かのご参考となりましたら幸いです。
このページを共有する