WordPressでは、YouTube動画やツイートなどのサードパーティコンテンツを自動的に埋め込むことで、魅力的なマルチメディアページを簡単に作成することができます。
しかし、過去15年以上にわたってWordPressユーザーと密接に仕事をしてきて、私たちが学んだ教訓は、oEmbedsも問題を引き起こす可能性があるということです。YouTubeの動画がコンテナからはみ出し、テキストをすべて横に押しやったり、行動喚起ボタンを画面の下に押しやったりすることを想像してみてください。
そこで、oEmbedsの最大幅を設定します。これにより、埋め込みコンテンツをコントロールし、サイトのデザインにシームレスにフィットさせることができます。
この投稿では、WordPressでoEmbedの最大幅を設定し、サイトのレイアウトを完全にコントロールする方法を紹介します。
なぜWordPressでOEmbedの最大幅を修正するのか？
WordPressはoEmbedをサポートしており、サードパーティのサイトからコンテンツを自動的に埋め込むことができます。例えば、YouTubeの動画、SlideShareのプレゼンテーション、ツイート、その他様々なタイプのコンテンツを簡単に埋め込むことができます。
このコンテンツはサーバーにホスティングされているわけではないので、サイトが遅くなることはありません。特に、oEmbedのような技術を常に使用し、WordPressに動画をアップロードするべきではありません。
注意：FacebookとInstagramは過去にoEmbedをサポートしていましたが、メタ情報はoEmbedのサポートをドロップしました。この機能を修復する方法については、WordPressでFacebookとInstagramのoEmbed問題を修正する方法のガイドをご覧ください。
WordPressは常に埋め込みコンテンツの幅を調整し、利用可能なスペースにぴったり収まるようにします。しかし、時には埋め込みコンテンツの幅が広すぎて、サイトの他のコンテンツエリアと重なってしまうことがあります。
残念ながら、WordPressのビルトインツールを使用して、サードパーティのエンベッドの最大幅を設定することはできません。
それでは、WordPressでこの欠けている機能を追加し、最大oEmbed幅を設定する方法を見てみましょう。以下のクイックリンクから、使いたい方法にジャンプしてください：
- Method 1: Using the Embed Shortcode (Best for YouTube Videos)
- Method 2: Using the Built-in WordPress Embed Blocks (Easy)
- Method 3: Using Custom PHP (Set a Max Width for All Embeds)
- Method 4: Using CSS (Set Max Width for Specific Embed Types)
- Bonus Tip: How to Easily Add Your Social Media Feeds to WordPress
方法1：埋め込みショートコードを使う（YouTube動画に最適）
ショートコードを使って最大幅を設定することができます。この方法は簡単で、特に少数の投稿に対してのみ最大幅を設定したい場合に便利です。また、この方法はWordPressのブログ投稿に動画を埋め込む場合にも有効であることが分かっています。
しかし、埋め込みショートコードとその幅と高さのパラメータは、すべての oEmbed プロバイダーに対して機能するわけではありません。例えば、WordPress の Giphy 埋め込みの高さと幅を設定するために使用することはできません。その場合は、後述の他の方法をお試しください。
投稿エディターにURLを貼り付ける代わりに、ショートコードブロックを作成する必要があります。そして、埋め込みコードに幅と高さのパラメータを追加します。
例えば、次のように埋め込みタグで囲むだけです：
width="900" height="600"]https://www.youtube.com/watch?v=6LwWumPeues
幅と高さの値を自分のニーズに合わせて変更し、URLを埋め込みたいコンテンツに置き換えるだけです。
ページが気に入ったら、『更新』か『公開する』のどちらかをクリックしてください。
埋め込みコンテンツは、利用可能なスペースにきれいに収まるはずです。
方法2：WordPressにビルトインされている埋め込みブロックを使う（簡単）
WordPressのブロックエディターには、Twitter、YouTubeのライブストリームや動画、SoundCloudの埋め込みブロックなど、さまざまなoEmbedサービス用の埋め込みブロックが用意されています。
これらのブロックの中には、埋め込みブロックの配置を変更したり、コンテンツを「ワイド幅」や「全幅」に設定できるものもあります。
全幅を選択した場合、埋め込みブロックと埋め込みコンテンツは画面の全幅を占めます。ワイド幅を選択した場合、埋め込みブロックは全幅を占めますが、コンテンツのサイズは変わりません。
最終的な結果はWordPressテーマによって異なるかもしれません。しかし、これは素早く簡単な方法なので、あなたのWordPressサイトに効果があるかどうか試してみる価値はある。
ブロックの上にある小さなツールバーの「整列」ボタンをクリックするだけです。次に、「横幅」または「全幅」のいずれかを選択します。
これで埋め込みの最大幅の問題が解決されたなら、そのままページを公開してください。もし見た目に満足できなければ、別の方法を試してください。
方法3：カスタムPHPを使う（すべての埋め込みに最大幅を設定する）
すべての埋め込みコンテンツに最大幅を設定したい場合があります。これを行う最も簡単な方法は、WordPressサイトにカスタムコードを追加することです。
この方法の問題点は、埋め込みコンテンツがすでに’width’を定義していない場合にのみ、最大幅属性が機能するということです。埋め込みコードがすでに独自の ‘width’ 属性を含んでいる場合、この方法は動作しないかもしれません。
サイトのコードを編集したことがない場合は、WordPressでカスタム・コード・スニペットを簡単に追加する方法をご覧ください。
テーマファイルを手動で編集するように指示するガイドもありますが、これはすべてエラーの原因となり、サイトを完全に壊してしまうことさえあります。
そのため、WPCodeの使用をお勧めします。テーマファイルを編集することなく、WordPressにコードスニペットを簡単に追加できる。これにより、カスタムコードの機能をすべて失うことなく、テーマの更新や変更が可能になります。
WPCodeはまた、設定済みのコードスニペットのライブラリが付属しており、「Set oEmbed Max Width」スニペットも含まれています。これにより、oEmbedの最大幅と高さを指定することができます。
まず、無料のWPCodeプラグインをインストールし、有効化する必要があります。 詳しくは 、WordPressプラグインのインストール方法のステップバイステップガイドをご覧ください。
有効化したら、WordPress管理画面のCode Snippets “ Libraryに移動します。
ここで、「Set oEmbed Max Width」を検索し、同じ名前の結果にマウスオーバーすることができる。
そして『スニペットを使う』をクリックすればいい。
WPCodeは、プラグインがすでにあなたのためにすべてを設定している「Edit Snippet」ページに移動します。
ここに、次のようなコード・スニペットが用意されている：
function wpcode_snippet_oembed_defaults( $sizes ) {
return array(
'width' => 400,
'height' => 280,
);
}
add_filter( 'embed_defaults', 'wpcode_snippet_oembed_defaults' );
初期設定では、最大幅は「400」、最大高さは「280」に設定されています。必要に応じて、高さと幅の属性を調整することを忘れないでください。
最後に、’Inactive’ スライダーをクリックして、’Active’ と表示されるようにします。そして、’Save Snippet’または’Update’ボタンをクリックするだけで、コード・スニペットがライブになります。
方法4：CSSを使う（特定の埋め込みタイプの最大幅を設定する）
初期設定では、WordPressはサイトのさまざまなエリアにCSSクラスを自動的に追加します。
また、埋め込みブロックにいくつかのCSSクラスを追加します。これらの CSS クラスを使用して、WordPress ブログの埋め込みブロックの最大幅を設定できます。
ツイートの埋め込みなど、特定の埋め込みタイプに最大サイズを設定したい場合に適しています。また、埋め込みコンテンツの種類に関係なく、すべてに対して最大サイズを設定することもできます。
どのCSSクラスをターゲットにする必要があるかを調べるには、投稿やページにコンテンツを埋め込み、ブラウザーでプレビューするだけです。
次に、埋め込みコンテンツにマウスオーバーして右クリックします。表示されるメニューで、「外観」ツールを選択します。
WordPressが埋め込みコンテンツに追加したCSSクラスをすべて表示する新しいパネルが開きます。これらのクラスを使用して、この埋め込みタイプの最大幅を設定することができます。
特定のoEmbedプロバイダーをターゲットにするには、通常.wp-block-embed-providernameを使用します。
例えば、以下の画像では、.wp-block-embed-providernameクラスに下線を引いています。この行には、.wp-block-embed-pinterestクラスもあります。
.wp-block-embed-pinterestクラスを使って、Pinterest埋め込みにのみ最大幅を設定することができます。
例えば、こうだ：
.wp-block-embed-pinterest {
max-width: 900px!important;
}
ただ、対象とするコンテンツによっては、.wp-block-embed-pinterestを別のCSSクラスで置き換える必要があることに注意してください。
すべてのエンベッドに最大幅を設定したい場合は、次のスニペットを使用できます：
.wp-block-embed {
max-width: 900px!important;
}
サイトにカスタムCSSを追加する最も簡単な方法は、WPCodeを使用することです。上記と同じ手順でカスタマイザーを新規作成するだけです。
ただし、今回は「コードタイプ」のドロップダウンを開き、「CSSスニペット」を選択する。
WPCodeスニペットをライブにするのと全く同じ方法で、このスニペットを保存し、公開することができます。
これで、WordPressはこの値を埋め込み用の最大サイズとして使用します。
ボーナスヒント：WordPressにソーシャルメディアのフィードを簡単に追加する方法
ソーシャルメディアプラットフォームのコンテンツを定期的に埋め込むのであれば、Smash Balloonを使えば時間と労力を大幅に節約できます。
Smash BalloonはWordPressに最適なソーシャルメディアプラグインで、WordPressサイトにソーシャルメディアのフィードを簡単に追加することができます。
YouTube、Twitter、Instagram、TikTok動画など、人気のソーシャルメディア埋め込みをすべてサポートしている。
さらに重要なことは、Smash Balloonはモバイルレスポンシブで、どのWordPressテーマでも動作するため、埋め込みコンテンツが常に美しく表示されることです。
この投稿が、WordPress で oEmbed の最大幅を設定する方法を学ぶのにお役に立てば幸いです。WordPress で iFrame コードを簡単に埋め込む方法についてのガイド、または中小企業向けの最高のライブチャットソフトウェアの専門家による比較もご覧ください。
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
Andreu
The problem of this is that it makes the max width of the images also to the size defined. What can I do if I want to limit the embed width in the editor but not the image one? Thanks
Joe Daniel
Thank you. I’ve been struggling with this for weeks… works for WP 4.0 with Genesis theme
digg
Hi, it works perfectly for me.
But this affects to the overall site, which have different widths since there are full-width pages, with sidebars, or forums, etc.
Is it possible to discriminate this to affect only bbpress forum’s pages?
It will be very useful, thanks!
Ajit Kumar
For anybody who can’t get this working or if Youtube videos and other iframe content are not getting resized, you will need to add the following code to your style.css
/* Make sure embeds and iframes fit their containers */
embed,
iframe,
object {
max-width: 100%;
}
Hope this helps. And Syed, thanks for the great post!
Waymond
Thanks for posting the solution!
Abhishek Sachan
not working
Dj
THANKS! This was driving me crazy.
Anto (@imanto)
You can’t use iframe, object, embed { max-width: 100%; height:auto;} yes it gets the width correct and makes the video responsive, but it doesnt fix the height when viewing in the browser.
Is there actually a way to do this? Ive tried pretty much everything, even fitvids dont work because you are setting a px base width in the functions, but it shows that width on mobile, then when you try to correct that with max-width, the height messes up even in the browser….
im thinking media queries or something? ugh im beat.
Amir
Works perfect, thanks a lot!
Pierre Dickinson
Hi, thanks for the tip, but it doesn’t work, here’s what you need in your function.php file :
add_filter(‘embed_defaults’,’yourthemename_embed_defaults’);
function yourthemename_embed_defaults($defaults) {
$defaults[‘width’]=600; // or whatever you want
$defaults[‘height’]=360; // or whatever you want
return $defaults;
}
it works great!
Regards,
Filip Kojic
This code doesnt work well. I put my theme name and theme just blocks.
Valerie
Not sure if the other commenter realized it, but the code has curly quotes and would break a site. Gonna test here to see if shortcode wrappers will prevent the change that broke the code…
add_filter('embed_defaults','yourthemename_embed_defaults');John Cronin
I am attempting to post a high-end animation film from YouTube to my WordPress blog. The bottom of the frame is cut off in the preview. Once the play arrow is clicked, this problem goes away. But the filmmaker is rightfully unhappy that the preview in the post will give the appearance of an error. Adjusting height and width in the post code works, but does not solve the problem. Ideas?
Colin
Worked like a charm – thanks!
Ryan Silver
Hi there,
I used your solution for width and it worked great. But how do I set the height now? Is it just the same if ( ! isset( $content_width ) ) $content_width = 560; but with the word ‘width’ is replaced with the word ‘height’ ? I tried that and it did not work….
Editorial Staff
The height is auto-determined to match the 16:9 ratio.
管理者
FIlip Kojic
It looks like it is 16:10. Here is example:
How can I change height. Please someone answer.
Jasmine Ham
greats, it’s working! but what if i need it to be responsive?
any idea to doing that?
josef
hi,
is there a way to force all ifreams in the site to be 100% widht. not omly youtube
i have about 300 ifreams and all fixed size so… thanks in advance
Josef
josef
hi,
is there a way to force all ifreams in the site to be 100% widht. not omly youtube
i have about 300 ifreams and all fixed size so…
Ryan
I added this code to my functions.php but it made no difference, and I assume that’s because my theme doesn’t define $content_width.
I see the link to the codex about defining it, but I’m not a developer and don’t have one on call; how does one add a $content_width definition to a theme? Where does it go? Thanks!
Justin Germino
This worked perfectly, is there anyway to force and default the video to HD quality instead of SD quality which seems to be the default even though in my YouTube settings I have it set to default to HD?
Editorial Staff
What is your max width? I have read in the past that Youtube adjusts quality based on the width of the iframe.
管理者
Grant Norwood
Please note that the $content_width variable must be declared as global before this fix will work.
Nigel Parry
WP seems to be updated by people who are unclear about the centrality of multimedia on the Internet. Why this basic preference would have to require code intervention I don’t know. WP clearly could not tell how wide my columns were. Anyway, all fixed now. You folks rock.
Editorial Staff
Well Nigel, there is more to it. They are trying to make WordPress easier to use for “users”. Overtime, WordPress has added one option after another. This gets really terrifying for new users. This is why they are going with decisions over options route. The hope with this oEmbed max width is that each theme designer should/will define it in their themes, so the end-user doesn’t have to worry about it.
管理者
Alex Leonard
Thanks! I was a little baffled as to where the media embed setting had gone to!
Azad
Hello
Thanks for your post.
But I can’t get this right, I wrote the other post you mentioned in the comments. But I still can’t get it working, I put this:
At the begginin of my functions.php, but then my whole site stoped working. everything turned white, I had to edit the file through ftp to get it working again.
What am I doing wrong?
Thanks!
Azad
Hey
I got it working, thanks!
Monica
Hi, where in the functions.php file should this code be placed?
Editorial Staff
You can paste it in the beginning or at the end as long as it is independent of other functions. Here is an article on that:
https://www.wpbeginner.com/beginners-guide/beginners-guide-to-pasting-snippets-from-the-web-into-wordpress/
管理者
Jesse Garnier
What value would be appropriate for $content_width for a variable-width or responsive design?
Editorial Staff
For responsive design, you probably want to use fitvid.js or something similar to resize your videos.
管理者
Paul Lumsdaine
I was able to kind of get the responsiveness to work with setting a max-width: 100% on my iframes in CSS. Of course the height is set automatically depending on your content width but this should at least get it working correctly without using any extra js. Fitvid is the way to go, but this worked for me.
Jeremy Myers
Paul,
Can you include the css you used to set your iframe width to 100%?
Roman
I use this CSS code for responsive design:
iframe, object, embed { max-width: 100%; } ( if you want you can add -> height: auto )
Tevya
Unfortunately Roman’s CSS either doesn’t work on some themes or doesn’t work with the new WP 3.6 media player that’s built-in to core. I just tried it and nothing. I’m trying to get a theme that’s responsive to keep the new WP 3.6 player responsive as well, but no luck so far. The 2012 theme seems to handle it very nicely, but I can’t figure out what they’re doing different than this theme I’m working with.
Melanie
I am a novice to WP & coding, with that said not sure where to put the code “if ( ! isset( $content_width ) ) $content_width = 600;” I went to the function.php file in my Suffusion theme and not sure where exactly to insert this code. I tried a number of places where it mentioned video attachment and it is not working. In my case, the embedded videos are now too big for my theme since upgrading to WP 3.5.
Editorial Staff
Change the number 600 to match your theme size. If it is too big for your theme, then make it smaller.
管理者
Jessi Linh
It’s been released at right time!!! The name “Elvin” is so special,too.
Thanks for your post.
Edward Caissie
This is part of the reason setting an appropriate $content_width value is a requirement under the WordPress Theme Review guidelines (http://codex.wordpress.org/Theme_Review#Required_Hooks_and_Navigation)
Editorial Staff
Yup, totally agreed with you there. Only poorly coded themes will not have that. But there are a lot of those out there. A theme that one of our clients was using had that piece missing. Overall, its a good theme.
管理者
Devin
Perfect timing. Thank you!