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 YouTube Videosunu Tam Ekran Arka Plan Olarak Ekleme

Editoryal Not: WPBeginner üzerindeki ortak bağlantılardan komisyon kazanıyoruz. Komisyonlar, editörlerimizin görüşlerini veya değerlendirmelerini etkilemez. Editoryal Süreç hakkında daha fazla bilgi edinin.

WordPress’te tam ekran arka plan olarak bir YouTube videosu eklemek ister misiniz?

Arka plan videoları doğru kullanıldığında ziyaretçilerin dikkatini anında çekebilir ve onları web sitenizde tutabilir. Bu da videoları açılış sayfaları ve satış sayfaları için mükemmel bir seçim haline getirir.

Bu makalede, bir YouTube videosunu WordPress web sitenize tam ekran arka plan olarak nasıl ekleyeceğinizi göstereceğiz.

How to add YouTube video as fullscreen background in WordPress

Neden YouTube Videosunu Tam Ekran Arka Plan Olarak Kullanmalısınız?

Başlığınızda ilgi çekici ve göz alıcı bir video arka planı, ziyaretçilerin sitenizde kalmasını sağlamak için harika bir yoldur. Ziyaretçiler WordPress sitenize ilk geldiklerinde, dikkatlerini çekmek için yalnızca birkaç saniyeniz vardır.

Bugünlerde birçok farklı WordPress teması video arka planlarını destekliyor. Ancak WordPress’e video içeriği yüklemek ve barındırmak çok fazla bant genişliği gerektirebilir.

WordPress barındırma planınıza bağlı olarak, ekstra depolama alanı satın almanız bile gerekebilir.

WPBeginner olarak, videolarınızı WordPress’e yüklememenizi şiddetle tavsiye ediyoruz.

Bunun yerine, YouTube gibi bir hizmet kullanabilir ve ardından videoyu WordPress web siteniz için arka plan olarak yerleştirebilirsiniz. Bu şekilde, web sitenizi yavaşlatmadan ve kullanıcı deneyiminizi etkilemeden rakiplerinizden sıyrılabilirsiniz.

Bununla birlikte, bir YouTube videosunu WordPress web sitenize tam ekran arka plan olarak nasıl ekleyebileceğinizi görelim. Size iki yöntem göstereceğiz ve bunlar arasında gezinmek için bu hızlı bağlantıları kullanabilirsiniz:

Yöntem 1: Tam Ekran Video Arka Planı için Gelişmiş WordPress Arka Planlarını Kullanın (Ücretsiz)

Video arka planları eklemek için ücretsiz ve kolay bir yol arıyorsanız, Advanced WordPress Backgrounds‘u kullanabilirsiniz.

Bu ücretsiz eklenti, YouTube videoları da dahil olmak üzere herhangi bir renk, resim veya video kullanarak tam ekran arka plan oluşturmanıza olanak tanıyan bir Arka Plan bloğu ekler.

Öncelikle, WordPress panonuza eklentiyi yüklemeniz ve etkinleştirmeniz gerekecektir. Yardıma ihtiyacınız varsa, lütfen bir WordPress eklentisinin nasıl kurulacağına ilişkin kılavuzumuza bakın.

Etkinleştirmenin ardından, bir YouTube videosunu tam ekran arka plan olarak eklemek istediğiniz sayfaya veya gönderiye gitmeniz yeterlidir. Gutenberg blok düzenleyicisinde, devam edin ve ‘+’ blok ekle düğmesine tıklayın.

Açılan pencerede ‘Background AWB’ yazmaya başlayın. Doğru blok göründüğünde, sayfaya eklemek için bir tıklama yapın.

How to add a fullscreen video to a WordPress blog post or page

Sol taraftaki menüde, oluşturabileceğiniz farklı türde tam genişlikte arka planlar için üç sekme göreceksiniz: Renk, Görüntü ve Video.

Bir YouTube videosu eklemek istediğiniz için ‘Video’ sekmesine tıklayın. Bundan sonra,‘YouTube / Vimeo‘ sekmesini seçin.

Artık WordPress blogunuzda kullanmak istediğiniz YouTube video dosyasının URL’sini kopyalayıp yapıştırabilirsiniz.

Getting the URL for a YouTube video

Şimdi, WordPress blok düzenleyicisi bu arka planın nasıl görüneceğine dair bir önizleme gösterecektir.

Gelişmiş WordPress Arka Planları, videonun boyutunu üzerine eklediğiniz içeriğe göre değiştirir, bu nedenle video şu anda biraz küçük görünüyorsa endişelenmeyin.

How to customize a YouTube background video in WordPress

Varsayılan olarak, video arka planı mobil cihazlarda devre dışı bırakılmıştır.

Ancak, mobil cihazlarda video arka planını göstermek istiyorsanız, ‘Mobil cihazlarda etkinleştir’ geçişini etkinleştirmek için tıklayın.

Showing a YouTube background on mobile devices

Kutunun dışında, blok tüm YouTube videosunu otomatik oynatmada ve bir döngüde oynatacaktır.

Başka bir seçenek de ‘Başlangıç Zamanı’ ve ‘Bitiş Zamanı’ kutularına tam zamanları yazarak videonun belirli bir bölümünü oynatmaktır.

Ayrıca ‘Döngü’ geçişini devre dışı bırakarak videonun döngü halinde oynatılmasını durdurabilirsiniz.

How to add a YouTube background video to a website

Varsayılan olarak, video yalnızca ziyaretçi onu tarayıcısında görebildiğinde oynatılır. Bu, web sitenizin performansını korumanıza yardımcı olacaktır, bu nedenle genellikle ‘Her zaman oynat’ geçişini devre dışı bırakmak isteyeceksiniz.

Videoyu ilk eklediğinizde, %100 opaklıkta gösterilir, bu nedenle katı görünür. YouTube video arka planını daha ince hale getirmek için ‘Görüntü Opaklığı’ kaydırıcısını sürüklemekten çekinmeyin.

Changing the opacity settings for a YouTube video

Opaklık ile denemeler yaparsanız, renkli bir kaplama eklemeyi de deneyebilirsiniz.

‘Kaplama Rengi’ bölümünü genişletmek için tıklamanız ve ardından farklı renklerde kaplamalar oluşturmak için ayarları kullanmanız yeterlidir.

Adding an overlay to a video background

Arka planın tam olarak istediğiniz gibi görünmesini sağlamak için paralaks efekti ve aralık gibi diğer ayarları keşfetmekten çekinmeyin.

YouTube video arka planının nasıl ayarlandığından memnun olduğunuzda, bağlantılar, metinler ve resimler gibi içerik eklemeye başlamanın zamanı gelmiştir.

Başlamak için Arka Plan (AWB) bloğunun ortasındaki ‘+’ simgesine tıklayın.

Adding blocks to a YouTube background video

Bu, eklemek istediğiniz bloğu seçebileceğiniz bir açılır pencere açar. Advanced WordPress Backgrounds eklentisi tüm standart WordPress bloklarıyla çalışır, böylece istediğiniz içeriği ekleyebilirsiniz.

Bloğun üstüne metin eklerseniz, metin rengini video arka planıyla iyi uyum sağlayacak şekilde değiştirdiğinizden emin olun.

Nasıl göründüğünden memnun olduğunuzda, sayfayı canlı hale getirmek için ‘Güncelle’ veya ‘Yayınla’ düğmesine tıklayın. Şimdi, WordPress web sitenizi ziyaret ederseniz, video arka planını çalışırken göreceksiniz.

An example of a YouTube video background in WordPress

Tam ekran arka plan videonuzu tamamen özelleştirmek veya hatta web sitenizdeki tüm sayfaları kolayca tasarlamak istiyorsanız, bu yöntem tam size göre.

Bir YouTube videosunu tam ekran arka plan olarak eklemenin en iyi yolu Thrive Architect‘tir.

Thrive Architect, yeni başlayanlar düşünülerek yapılmış, kullanımı kolay bir sayfa oluşturucu eklentisidir. Video arka plan özelliğinin yanı sıra, kullanımı esnek olan sürükle ve bırak işlevine sahiptir, böylece istediğiniz web sitesini herhangi bir güçlük çekmeden oluşturabilirsiniz.

Ayrıca, dönüşümler için optimize edilmiş akıllı açılış sayfası şablonlarıyla birlikte gelir, böylece açılış sayfanız en başından itibaren başarıya hazırdır.

Thrive Architect hakkında daha fazla bilgi için Thrive Architect incelememizi okuyabilirsiniz.

Thrive Architect

Bu yöntemi kullanmak istiyorsanız önce bir Thrive Architect planı satın alın. Bağımsız bir ürün olarak veya Thrive Themes paketinin bir parçası olarak satın alınabilir.

Ardından, eklentiyi yüklemeniz yeterlidir. Daha fazla bilgi için WordPress eklentisi yükleme kılavuzumuza göz atabilirsiniz.

Bundan sonra, WordPress yönetici alanından ‘Sayfalar’a gidebilir ve düzenlemek için bir sayfa seçebilirsiniz. Sayfanın üzerine gelin ve ‘Thrive Architect ile Düzenle’yi seçin.

Clicking Edit with Thrive Architect on a page

Ardından, sayfanın sağ tarafındaki ‘+’ düğmesine tıklayın ve Arka Plan Bölümü öğesini bulun.

Sayfaya eklemek için üzerine tıklamanız yeterlidir.

Adding a Background section in Thrive Architect

Bu noktada, sayfanın sol tarafına gidebilir ve Arka Plan Stili bölümüne ilerleyebilirsiniz.

Burada, ‘Video arka planı’ geçişini etkinleştirin ve Kaynak için ‘YouTube’u seçin.

Selecting a video background style in Thrive Architect

Bundan sonra, tam ekran arka plan olarak kullanmak istediğiniz YouTube videosuna gidin.

YouTube video URL’sini bu şekilde kopyalamanız yeterlidir:

Getting the URL for a YouTube video

Ardından, URL’yi uygun bölüme yapıştırın.

Şimdi ekranda arka planı görmelisiniz.

Pasting video background URL in Thrive Architect

Arka plan eklenmiş olsa da henüz tam ekran değildir.

Tam ekran olduğundan emin olmak için Ana Seçenekler bölümüne gitmeniz gerekir. Ardından, ‘İçerik tüm ekran genişliğini kaplar’, ‘Yüksekliği ekranla eşleştir’ ve ‘Ekran genişliğine sığdırmak için uzat seçeneklerini’ etkinleştirin.

Adjusting the video background height and width in Thrive Architect

Biraz daha fazla seçenek keşfedelim. Arka planınıza içerik eklemek için tek yapmanız gereken yine sağ taraftaki ‘+’ düğmesine tıklamak ve bir öğeyi sürükleyip bırakmak.

Metinler, resimler, formlar, düğmeler, referanslar ve daha fazlasını ekleyebilirsiniz. Thrive Architect, web siteniz için yararlanabileceğiniz düzinelerce dönüşüm odaklı öğeye sahiptir.

Arka plan renginin metinle yeterince iyi kontrast oluşturmadığını düşünüyorsanız, Arka Plan Bölümü ayarlarına geri dönmeniz yeterlidir.

Ardından, tekrar Arka Plan Stili’ne gidin ve Katman Ekle seçeneğinde düz bir renk seçin. Bundan sonra, arka plan filtresi olarak kullanmak için bir renk seç ebilir ve opaklığı istediğiniz gibi ayarlayabilirsiniz.

İşiniz bittiğinde, ‘Uygula’ düğmesine tıklayın.

Changing the color overlay opacity in Thrive Architect

Arka Plan Bölümü ayarlarında ayarlayabileceğiniz bir diğer şey de Kaydırma Davranışıdır. Statik, yapışkan veya paralaks olmasını seçebilirsiniz.

Kullanıcı aşağı kaydırdıkça arka planın hareket etmemesi için sabit tutmanızı öneririz. Aksi takdirde video oynatılmaya devam eder ve bu da web sitenizi yavaşlatabilir.

Adjusting the scroll behavior of the video background in Thrive Architect

Yapabileceğiniz bir sonraki şey Duyarlı bölümüne gitmektir. Burada, video arka planının web sitenizin mobil ve tablet sürümlerinde görünüp görünmeyeceğini seçebilirsiniz.

Bu size kalmış, ancak videoların yüklenmesinin biraz zaman alacağını unutmayın. Ziyaretçileriniz küçük ekranlı bir cihaz kullanırken videoların çalışmasını beklemek can sıkıcı olabilir.

Adjusting the responsiveness behavior of the video background in Thrive Architect

Tam ekran YouTube video arka planından memnun kaldığınızda, değişikliklerinizi kaydetmek için ‘Çalışmayı Kaydet’ düğmesine tıklamanız yeterlidir.

Bu kadar!

Şimdi, canlı olarak nasıl göründüğünü görmek için WordPress web sitenize gidin.

İşte test web sayfamızın nasıl göründüğü.

Video background example made with Thrive Architect

Alternatif: WordPress’te Animasyonlu Arka Plan Ekleme

Video arka planlar görsel olarak çekici olsalar da web sitenizin yüklenme hızını yavaşlatabilirler. Alternatif bir seçenek istiyorsanız, bunun yerine animasyonlu bir arka plan ekleyebilirsiniz.

Bunu yapmanın en iyi yolu, WordPress için güçlü bir sürükle ve bırak sayfa oluşturucu eklentisi olan SeedProd‘dur.

Particle.js kullanarak web sitenize kolayca çarpıcı animasyonlu arka planlar eklemenizi sağlar. Particle.js, etkileşimli parçacık animasyonları oluşturan hafif bir JavaScript kütüphanesidir.

The particle background's advanced settings in SeedProd

Daha fazla bilgi için WordPress’te nasıl animasyonlu arka plan ekleyebileceğinize dair rehberimize göz atabilirsiniz.

Bonus İpucu: WordPress’te YouTube Video Akışı Ekleme

Web sitenize daha fazla video mu eklemek istiyorsunuz? WordPress yerleşik video gömme bloklarına sahip olsa da, özellikle birden fazla videonuz varsa, videoları görüntülemenin görsel olarak en çekici yolu değildir.

Smash Balloon YouTube Feed Pro işte burada devreye giriyor.

Smash Balloon YouTube Feed Pro piyasadaki en iyi YouTube galeri eklentisidir. YouTube kanalınızdaki en son videoları otomatik olarak gösterir, böylece ziyaretçileriniz her zaman en yeni içeriği görür.

Embedding a YouTube playlist using Smash Balloon

Smash Balloon’un kolay editörünü kullanarak bir YouTube beslemesi oluşturun ve ardından kısa kodu veya eklentinin hazır bloğunu kullanarak herhangi bir sayfaya veya gönderiye ekleyin.

Smash Balloon’u YouTube çalma listelerini, favorileri ve canlı yayınları WordPress web sitenize yerleştirmek için de kullanabilirsiniz.

Creating a YouTube feed using the Smash Balloon social media plugin

Smash Balloon ile ilgili en iyi şey sitenizi yavaşlatmamasıdır. Eklentinin yerleşik YouTube önbellekleme özelliği, sitenizin her zaman hızlı yüklenmesini sağlayacaktır, bu da SEO için harikadır.

Daha fazla ayrıntı için, WordPress’te bir YouTube kanalındaki en son videoların nasıl gösterileceğine ilişkin adım adım kılavuzumuza bakabilirsiniz.

Umarız bu eğitim WordPress’te arka plan olarak bir YouTube videosunun nasıl ekleneceğini öğrenmenize yardımcı olmuştur. Ayrıca WordPress ile viral bir bekleme listesi açılış sayfasının nasıl oluşturulacağına ilişkin kılavuzumuza ve en iyi WordPress tema oluşturucuları için uzman seçimlerimize göz atmak 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

14 yorumBir Cevap Bırakın

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Moinuddin Waheed says

    This is very simple yet powerful idea to grab the visitors attention by playing something in the background.
    I have used it with page builders and never knew that simple method directly from Gutenberg is also available to use.
    it is specially helpful for landing and sales pages which makes intuitive on visitors part to engage with call to action button.
    Thank for illustrating the simple steps.

  3. THANKGOD JONATHAN says

    I have an uploaded video on my WordPress library and I have been thinking of making it like a background video on my blog.
    Please how do I do it properler so that it does not affect my website speed? Or must I upload it on youtube and then embed it on my site?

  4. Ralph says

    I want to use it as a background for my portfolio/business contact page, but does it slow down the website itself, or does it load it straight from YouTube and doesn’t slow down the website itself?

    Previous comments are old but still concerning.

    • WPBeginner Support says

      The videos should load as an embed from YouTube which shouldn’t cause a slowdown on your site.

      Yönetici

    • Jiří Vaněk says

      I shouldn’t worry about the slowdown of the website itself. The issue here lies mainly in slow connectivity and data on these devices. The first problem arises with mobiles that don’t have strong connectivity. It will lag, appear unprofessional, and perhaps lead the user to leave. The second issue is that if someone has a limited data plan, they’ll complain about how much data such a page consumes. Personally, I’d probably avoid this.

  5. Jiří Vaněk says

    I can learn something new again with Gutenberg. I’ve always known how to do this only in Elementor, where adding a video background is really simple. Now I know how to do it outside of Elementor as well.

  6. T_Lind says

    Great article!

    But I cannot add the video background to a single page, like you describe. I’m only able to add a youtube video to my homepage, which limits the extend to which the app can be used.

    Ideas?

  7. Tobi says

    Hi, this plugin was a disaster to my website.

    It consumed all the resources and for hours I was on the phone with my hosting company trying to battle why I was getting the errors on this screenshots below:

    After hours, we finally traced them to the plugin i recently installed.

    We had to remove it from the file manager and everything is back to normal now.

    It takes up a lot of resources unless you have a super hosting account, i don’t advise.

    • WPBeginner Support says

      Hi Tobi,

      The plugin shouldn’t consume too many resources because it loads video from YouTube not from your website. The first screenshot you shared points to a database connection error. We hope everything works fine for you now, however, if you still see issues on your website then it is most likely a hosting issue.

      Yönetici

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.