Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Kupası
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

WordPress’te oEmbed Maksimum Genişliği Nasıl Ayarlanır (4 Kolay Yöntem)

WordPress, YouTube videoları ve Tweetler gibi üçüncü taraf içeriklerini otomatik olarak yerleştirerek ilgi çekici, multimedya sayfaları oluşturmayı kolaylaştırır.

Ancak, son 15 yılı aşkın süredir WordPress kullanıcılarıyla yakından çalıştıktan sonra öğrendiğimiz bir ders, oEmbed’lerin de sorunlara neden olabileceğidir. Bir YouTube videosunun kabından taştığını ve tüm metninizi kenara ittiğini ya da harekete geçirici mesaj düğmenizi ekranın daha aşağısına ittiğini düşünün.

İşte bu noktada oEmbeds için maksimum genişlik belirlemek devreye girer. Bu sayede kontrolü elinize alabilir ve gömülü içeriğinizin web sitenizin tasarımına sorunsuz bir şekilde uymasını sağlayabilirsiniz.

Bu makalede, WordPress’te oEmbed maksimum genişliğini nasıl ayarlayacağınızı göstereceğiz, böylece site düzeniniz üzerinde tam kontrole sahip olacaksınız.

Setting oEmbed maximum width in WordPress

WordPress’te OEmbed Maksimum Genişliğini Neden Düzeltmelisiniz?

WordPress, üçüncü taraf web sitelerinden otomatik olarak içerik yerleştirmenize olanak tanıyan oEmbed’i destekler. Örneğin, YouTube videolarını, SlideShare sunumlarını, tweetleri ve diğer birçok içerik türünü kolayca yerleştirebilirsiniz.

Bu içerik sunucunuzda barındırılmaz, bu nedenle web sitenizi yavaşlatmaz. Özellikle, her zaman oEmbed gibi teknolojileri kullanmalı ve WordPress’e asla video yüklememelisiniz.

Not: Facebook ve Instagram geçmişte oEmbed’i desteklemiş olsa da Meta oEmbed desteğini bırakmıştır. Bu özelliğin nasıl onarılacağına ilişkin adım adım talimatlar için lütfen WordPress’te Facebook ve Instagram oEmbed sorununun nasıl çözüleceğine ilişkin kılavuzumuza bakın.

WordPress her zaman gömülü içeriğin genişliğini mevcut alana tam olarak uyacak şekilde ayarlamaya çalışacaktır. Ancak bazen gömülü içerik çok geniş olabilir ve web sitenizin diğer içerik alanlarıyla çakışabilir.

A WordPress embed overflowing the content width

Ne yazık ki, yerleşik WordPress araçlarını kullanarak üçüncü taraf yerleştirmeleri için maksimum genişlik ayarlayamazsınız.

Bununla birlikte, bu eksik özelliği nasıl ekleyebileceğinizi ve WordPress’te maksimum oEmbed genişliğini nasıl ayarlayabileceğinizi görelim. Kullanmak istediğiniz yönteme doğrudan atlamak için aşağıdaki hızlı bağlantıları kullanmanız yeterlidir:

Yöntem 1: Yerleştirme Kısa Kodunu Kullanma (YouTube Videoları için En İyisi)

Bir kısa kod kullanarak maksimum genişlik ayarlayabilirsiniz. Bu yöntem, özellikle yalnızca az sayıda gönderi için maksimum genişliği ayarlamak istiyorsanız kolaydır. Bu yöntemin WordPress blog yazılarına video yerleştirmek için de işe yaradığını gördük.

Ancak, gömme kısa kodu ile genişlik ve yükseklik parametreleri tüm oEmbed sağlayıcıları için çalışmaz. Örneğin, WordPress‘te bir Giphy yerleştirmesinin yüksekliğini ve genişliğini ayarlamak için kullanamazsınız. Bu durumda, aşağıda belirtilen diğer yöntemlerden birini deneyebilirsiniz.

URL’yi yazı düzenleyicisine yapıştırmak yerine, bir kısa kod bloğu oluşturmanız gerekir. Daha sonra gömme koduna genişlik ve yükseklik parametreleri ekleyebilirsiniz.

Örneğin, aşağıdakileri gömme etiketlerine sarmanız yeterlidir:

width="900" height="600"]https://www.youtube.com/watch?v=6LwWumPeues

Genişlik ve yükseklik değerlerini kendi ihtiyaçlarınıza göre değiştirin ve URL’yi gömmek istediğiniz içerikle değiştirin.

Embed shortcode width

Sayfadan memnun olduğunuzda, ‘Güncelle’ veya ‘Yayınla’ya tıklayın.

Yerleştirilen içerik artık mevcut alana düzgün bir şekilde sığmalıdır.

oEmbed width adjusted

Yöntem 2: Yerleşik WordPress Yerleştirme Bloklarını Kullanma (Kolay)

WordPress blok editörü, Twitter, YouTube canlı yayınları ve videoları ve SoundCloud yerleştirmeleri için bloklar gibi farklı oEmbed hizmetleri için çeşitli yerleştirme bloklarıyla birlikte gelir.

Embed blocks in WordPress

Bu bloklardan bazıları gömünün hizalamasını değiştirmenize ve içeriği ‘Geniş genişlik’ veya ‘Tam genişlik’ olarak ayarlamanıza olanak tanır.

Tam genişliği seçerseniz, gömme bloğu ve gömülü içerik ekranın tam genişliğini kaplar. Geniş genişliği seçerseniz, gömme bloğu tüm genişliği kaplar, ancak içerik aynı boyutta kalır.

Sonuç, WordPress temanıza bağlı olarak değişebilir. Ancak, bu hızlı ve kolay bir yöntemdir, bu nedenle WordPress web siteniz için işe yarayıp yaramadığını görmeye değer.

Bloğun üzerindeki küçük araç çubuğunda yer alan ‘Hizala’ düğmesine tıklamanız yeterlidir. Ardından, ‘Geniş genişlik’ veya ‘Tam genişlik’ seçeneklerinden birini seçin.

Adding aligning to an embed block in WordPress

Bu, gömme için maksimum genişlik sorununu çözerse, devam edebilir ve sayfayı yayınlayabilirsiniz. Nasıl göründüğünden memnun değilseniz, farklı bir yöntem denemeniz gerekir.

Yöntem 3: Özel PHP Kullanma (Tüm Eklemeler için Maksimum Genişlik Ayarlayın)

Bazen tüm gömülü içerikler için maksimum bir genişlik ayarlamak isteyebilirsiniz. Bunu yapmanın en kolay yolu WordPress web sitenize özel kod eklemektir.

Bu yöntemle ilgili sorun, maksimum genişlik özelliğinin yalnızca gömülü içeriğin zaten tanımlanmış bir ‘genişlik’ özelliğine sahip olmaması durumunda çalışacak olmasıdır. Gömme kodu zaten kendi ‘width’ niteliğini içeriyorsa, bu yöntem çalışmayabilir.

Sitenizin kodunu daha önce düzenlemediyseniz, WordPress’te özel kod parçacıklarının nasıl kolayca ekleneceğine ilişkin kılavuzumuza göz atın.

Bazı kılavuzlar tema dosyalarını manuel olarak düzenlemenizi ister, ancak bu her türlü hataya neden olabilir ve hatta web sitenizi tamamen bozabilir.

Bu nedenle WPCode kullanmanızı öneririz. Tema dosyalarınızı düzenlemek zorunda kalmadan WordPress’e kod parçacıkları eklemeyi kolaylaştırır. Bu şekilde, tüm özel kod işlevlerinizi kaybetmeden temanızı güncelleyebilir veya değiştirebilirsiniz.

WPCode ayrıca bir ‘Set oEmbed Max Width’ parçacığı içeren önceden yapılandırılmış kod parçacıklarından oluşan bir kitaplıkla birlikte gelir. Bu, oEmbed’leriniz için maksimum genişlik ve yükseklik belirlemenizi sağlar.

Öncelikle, ücretsiz WPCode eklentisini yüklemeniz ve etkinleştirmeniz gerekecektir. Daha fazla bilgi için , WordPress eklentisinin nasıl yükleneceğine ilişkin adım adım kılavuzumuza bakın.

Etkinleştirmenin ardından, WordPress yönetici panelinizde Code Snippets “ Library bölümüne gidin.

The WPCode ready-made code snippets library

Burada, ‘Set oEmbed Max Width’ için arama yapabilir ve farenizi aynı isimli sonucun üzerine getirebilirsiniz.

Daha sonra ‘Snippet Kullan’a tıklayabilirsiniz.

The ready-made oEmbed code, provided by the WPCode code snippets plugin

WPCode daha sonra sizi eklentinin sizin için her şeyi zaten yapılandırmış olduğu ‘Snippet’i Düzenle’ sayfasına götürecektir.

Burada, aşağıdaki hazır kod parçacığını göreceksiniz:

function wpcode_snippet_oembed_defaults( $sizes ) {
	return array(
		'width'  => 400,
		'height' => 280,
	);
}

add_filter( 'embed_defaults', 'wpcode_snippet_oembed_defaults' );

Varsayılan olarak, bu maksimum genişliği ‘400’ ve maksimum yüksekliği ‘280’ olarak ayarlar. Yükseklik ve genişlik özelliklerini ihtiyaçlarınıza göre ayarlamayı unutmayın.

Son olarak, ‘Etkin Değil’ kaydırıcısına tıklayarak ‘Etkin’i göstermesini sağlayın. Ardından kod parçacığını canlı hale getirmek için ‘Snippet’i Kaydet’ veya ‘Güncelle’ düğmesine tıklayın.

Activating a custom PHP snippet

Yöntem 4: CSS Kullanma (Belirli Yerleştirme Türleri için Maksimum Genişliği Ayarlama)

WordPress varsayılan olarak sitenizin farklı alanlarına otomatik olarak CSS sınıfları ekler.

Ayrıca gömme bloklarına birkaç CSS sınıfı ekler. Bu CSS sınıflarını WordPress blogunuzdaki yerleştirmeler için maksimum genişlik ayarlamak için kullanabilirsiniz.

Gömülü Tweetler gibi belirli bir gömme türü için maksimum boyut belirlemek istiyorsanız bu iyi bir seçimdir. Ayrıca, türden bağımsız olarak tüm gömülü içerikler için bir maksimum boyut oluşturmanıza da olanak tanır.

Hangi CSS sınıflarını hedeflemeniz gerektiğini öğrenmek için, içeriği bir gönderiye veya sayfaya yerleştirin ve ardından tarayıcınızda önizleyin.

Ardından, farenizi gömülü içeriğin üzerine getirin ve sağ tıklayın. Görüntülenen menüde ‘İncele’ aracını seçin.

Chrome's inspect tool

Bu, WordPress’in gömülü içeriğe eklediği tüm CSS sınıflarını gösteren yeni bir panel açar. Bu sınıfları, bu tür bir gömme için maksimum genişlik ayarlamak üzere kullanabilirsiniz.

Belirli bir oEmbed sağlayıcısını hedeflemek için genellikle .wp-block-embed-providername kullanırsınız, bu nedenle panelde bu sınıfı arayın.

Örneğin, aşağıdaki görselde .wp-block-embed-providername sınıfının altını çizdik. Bu satırda ayrıca bir .wp-block-embed-pinterest sınıfı da görebiliyoruz.

Finding CSS classes for embed blocks

Pinterest yerleştirmeleri için yalnızca .wp-block-embed-pinterest sınıfını kullanarak maksimum genişlik ayarlayabilirsiniz.

Örneğin:

.wp-block-embed-pinterest {
    max-width: 900px!important;
}

Hedeflemek istediğiniz içeriğe bağlı olarak .wp-block-embed-pinterest ‘i farklı bir CSS sınıfı ile değiştirmeniz gerekebileceğini unutmayın.

Tüm yerleştirmeler için bir maksimum genişlik ayarlamak istiyorsanız, aşağıdaki kod parçacığını kullanabilirsiniz:

.wp-block-embed {
    max-width: 900px!important;
}

Web sitenize özel CSS eklemenin en kolay yolu WPCode kullanmaktır. Yukarıda açıklanan aynı süreci izleyerek yeni bir özel snippet oluşturmanız yeterlidir.

Ancak, bu kez ‘Kod Türü’ açılır menüsünü açın ve ‘CSS Snippet’i seçin.

Adding a CSS snippet to WordPress

Artık bu snippet’ı herhangi bir WPCode snippet’ını canlı hale getirdiğiniz şekilde kaydedebilir ve yayınlayabilirsiniz.

Bu işlem tamamlandığında, WordPress bu değeri yerleştirmeleriniz için maksimum boyut olarak kullanacaktır.

Bonus İpucu: Sosyal Medya Beslemelerinizi WordPress’e Nasıl Kolayca Ekleyebilirsiniz?

Sosyal medya platformlarından düzenli olarak içerik yerleştiriyorsanız, Smash Balloon‘u kullanarak çok fazla zaman ve emek tasarrufu yapabilirsiniz.

Smash Balloon, WordPress için en iyi sosyal medya eklentisidir ve sosyal medya beslemelerinizi bir WordPress web sitesine kolayca eklemenizi sağlar.

An example of an embedded social media post, created using Smash Balloon

YouTube, Twitter, Instagram ve TikTok videoları dahil olmak üzere tüm popüler sosyal medya yerleştirmelerini destekler.

Daha da önemlisi, Smash Balloon mobil uyumludur ve herhangi bir WordPress temasıyla çalışır, böylece gömülü içeriğiniz her zaman harika görünecektir.

An example of an embedded Facebook timeline, created using Smash Balloon

Umarız bu makale WordPress’te oEmbed maksimum genişliğini nasıl ayarlayacağınızı öğrenmenize yardımcı olmuştur. Ayrıca iFrame kodunu WordPress’e nasıl kolayca yerleştirebileceğinize dair rehberimizi veya küçük işletmeler için en iyi canlı sohbet yazılımlarının uzman karşılaştırmasını görmek isteyebilirsiniz.

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.

Açıklama: İçeriğimiz okuyucu desteklidir. Bu, bazı bağlantılarımıza tıklarsanız komisyon kazanabileceğimiz anlamına gelir. WPBeginner'ın nasıl finanse edildiğini, neden önemli olduğunu ve nasıl destek olabileceğinizi görün. İşte editoryal sürecimiz.

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

Ultimate WordPress Araç Kiti

Araç setimize ÜCRETSİZ erişim sağlayın - her profesyonelin sahip olması gereken WordPress ile ilgili ürün ve kaynaklardan oluşan bir koleksiyon!

Reader Interactions

43 yorumBir Cevap Bırakın

  1. 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

  2. Joe Daniel

    Thank you. I’ve been struggling with this for weeks… works for WP 4.0 with Genesis theme

  3. 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!

  4. 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!

  5. Dj

    THANKS! This was driving me crazy.

  6. 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.

  7. Amir

    Works perfect, thanks a lot!

  8. 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');
  9. 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?

  10. Colin

    Worked like a charm – thanks!

  11. 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….

      • FIlip Kojic

        It looks like it is 16:10. Here is example:

        How can I change height. Please someone answer. :)

  12. Jasmine Ham

    greats, it’s working! but what if i need it to be responsive?
    any idea to doing that?

  13. 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

  14. 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…

  15. 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!

  16. 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.

      Yönetici

  17. Grant Norwood

    Please note that the $content_width variable must be declared as global before this fix will work.

  18. 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.

      Yönetici

  19. Alex Leonard

    Thanks! I was a little baffled as to where the media embed setting had gone to!

  20. 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!

  21. Monica

    Hi, where in the functions.php file should this code be placed?

  22. 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.

      Yönetici

    • 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.

  23. 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.

      Yönetici

  24. Jessi Linh

    It’s been released at right time!!! The name “Elvin” is so special,too.
    Thanks for your post.

    • 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.

      Yönetici

  25. Devin

    Perfect timing. Thank you!

Bir Cevap Bırakın

Yorum bırakmayı seçtiğiniz için teşekkür ederiz. Lütfen tüm yorumların yorum poli̇ti̇kasi uyarınca denetlendiğini ve e-posta adresinizin yayımlanmayacağını unutmayın. Ad alanında anahtar kelime KULLANMAYIN. Kişisel ve anlamlı bir sohbet edelim.