WordPress'te Tam Ekran Arka Planı Olarak Video Nasıl Eklenir

Videolar harikadır, daha çekici medya sağlarlar ve resimden daha fazla duygu yakalarlar.

Günümüzde giderek daha fazla web yöneticisi/marka, videoları web sitelerine tam arka plan olarak yerleştirmeye doğru ilerliyor. Ancak videoyu arka plana yerleştirmenin karmaşıklığı biraz teknik uzmanlık gerektirir.

Her şeyi okuyucularımız için basit ve harika hale getirmek için, arka plana gömülü videolar için ücretsiz bir eklenti listeleyeceğiz ve ayrıca basit yapılandırmalarla videoların arka plana nasıl yerleştirileceğine dair ayrıntılı bir eğitimden geçeceğiz.

Not: İçeriği tamamen anlamak için biraz kodlama deneyimi gereklidir. Bir şey kafa karıştırıcı görünüyorsa, yorumlarda soru sormaktan çekinmeyin.

WordPress'te tam ekran arka plan olarak Video Ekleme Eklentisi

Eklentiler harikadır, birkaç tıklamayla gerekli işlevselliği sağlarlar. Kodlama kullanarak videoların arka plana nasıl gömüleceğine ilişkin ayrıntılı eğitime geçmeden önce birkaç eklenti listeleyeceğim.

1. mb .YTPlayer arka plan videoları için

Arka plan entegrasyonu için popüler video eklentilerinden biri. Eklenti, sayfa öğesinin içine özel bir oynatıcı entegre eder.

Eklenti ile kullanıcılar videoları kolayca sayfalara entegre edebilir ve yayınlayabilir. Kurulum basittir ve eklenti, kolay entegrasyon için bir kısa kod oluşturur.

Eklenti, duyarlı düzeni tamamen desteklemiyor.

Tüm Detay ve İndir | Demo

2. Animasyon Efektli Kaydırıcı Kahraman

Eklentinin amacı, video arka planını WordPress'e kaydırıcı efektleriyle gömmenizi sağlamaktır. Eklenti, 11 arka plan animasyonu, arka plan müziği ekleme yeteneği, YouTube ve Vimeo video entegrasyonu vb.

Eklenti, herhangi bir WordPress teması veya Gutenberg gibi düzenleyici ile uyumludur, bu nedenle tüm WordPress web sitelerinde duyarlı ve hızlı olacaktır.

Tüm Detay ve İndir | Demo

Şimdi asıl kısım geliyor. Bir sonraki kısım, WordPress platformunun kodlama ve teknik çalışmalarını gerektirir.

Video yerleştirme birçok adım gerektirir. Adımları tek tek inceleyelim. Bu adımları anladıktan sonra, basit bir şeyin ne kadar karmaşık hale gelebileceğini kavrayabilirsiniz.

1. Videoya yer açmak için Div'i kullanma.

2. Div konumlandırmasını mutlak veya sabit olarak görünümün sol üst köşesine getirin. Sonraki adım, yüksekliğini ve genişliğini %100'e ayarlamak ve ardından z-endeksini 1'e ayarlamaktır. Z-endeksi, içeriğin derinliğini tanımlar.

3. JavaScript kullanarak Div ​​Video'yu Ölçekleme.

4. Monitör Ekranı, kullanıcı videoyu her ölçeklediğinde videoyu yeniden boyutlandırır ve yeniden ölçeklendirir.

5. Kodun farklı tarayıcılarda ve mobil işletim sisteminde çalıştığından emin olun.

Çok fazla kodlamaya benziyor, ancak videoyu WordPress gönderisinin veya sayfalarının arka planına gömme işlemini otomatikleştirmek için basit bir özel eklenti kullanacağız.

BGVIDEO: İndir

Eklentiyi indirin ve normal bir kurulumla devam edin (tıpkı diğer eklentilerin kurulumu gibi).

Bu basit eklenti, kısa kodla birlikte çalışır ve eklentide “bgvideo” adlı bir kısa kod bulunur. Kısa kod, videoyu herhangi bir sayfaya veya gönderiye yerleştirmek için bir ağ geçidi görevi görür.

Devam etmeden önce, tam işlevselliği için bazı parametreleri kısa koda beslememiz gerekiyor.

Parametreler yükseklik, genişlik, mp4, webm, ogg, otomatik oynatma, döngü, sessiz ve sabittir. Yükseklik ve genişlik, sırasıyla videonun yüksekliğini ve genişliğini ifade eder. mp4, webm, ogg alanları, ilgili video formatının URL'sini ifade eder. Videonun birden fazla cihazda sorunsuz çalışması için her biçimin URL'sini sağlamanız gerekir.

Medya Kitaplığına Video Ekleme

Sonraki adım, medya kitaplığına video eklemeyi içerir. Tüm biçimleri (webm, ogg, mp4) medya kitaplığına eklediğinizden emin olun.

Bgvideo yardımı ile video kısa kodları bgvideo'ya dönüştürülür.

Video kısa kodu aşağıdaki gibi görünüyor

[%video width=”1280″ height=”720″ mp4=”http://www.test.dev/wp-content/uploads/2014/09/videobackground-test.mp4″][/video] [%video genişlik=”1280″ yükseklik=”720″ webm=”http://www.test.dev/wp-content/uploads/2014/09/videobackground-test.webm”][/video]

<a%href=”http://www.85ideas.com/wp-content/uploads/2014/09/videobackground-test.jpg”><img%class=”alignnone size-large wp-image-1392″ src =”http://www.test.dev/wp-content/uploads/2014/09/videobackground-test.jpg” alt=”video-background-test” width=”1024″ height=”576″ />

Video kısa kodunun ve bağlantı etiketinin önündeki yüzde(%) işaretini kaldırmayı unutmayın.

bgvideo yardımı ile yukarıdaki kod aşağıdaki koda dönüşecektir.

 [bgvideo genişliği = "1280" yükseklik = "720" 
  mp4="http://www.test.dev/wp-content/uploads/2014/09/rainier.mp4" 
  webm="http://www.test.dev/wp-content/uploads/2014/09/rainier.webm" 
  poster="http://www.test.dev/wp-content/uploads/2014/09/rainier-cover-1024x576.jpg" 
  sabit = "hayır"]

Eklenti, video kısa kodunu otomatik olarak bgvideo kısa koduna değiştirir.

Videoyu Kullanıcıya Şeffaf Yapmak

Her şey ayarlandığında, sayfa CSS özelliğinde biraz sihir yapmanız gerekir. Sebebi ise sayfa içeriğinin videonun görüntülenmesini engellemesidir.

CSS, sayfanın içeriğini kaldıracak ve videoyu ziyaretçileriniz için parlatacaktır.

Her şeyin yolunda gitmesi için aşağıdaki CSS kodunu ekleyin.

#sayfa{

arka plan:yok;

}

Video arka planını tamamen ayarlamak için gereken birçok başka ince ayar var.

Sarmak

Okurlarımız için en iyi bahis, tam teşekküllü bir eklenti kullanmak ve kodlama kısmını görmezden gelmektir – kodlama kısmı, kodlamayı bilmiyorsanız işleri daha da kötüleştirecektir. İhtiyacı geliştiricilerinize yönlendirebilirsiniz, ancak bu bedavaya gelmez.

Bir başka harika alternatif çözüm, arka plan olarak animasyonlu GIF'lerin kullanılmasıdır. Animasyonlu GIF'lerin kullanılmasının iki nedeni vardır. Birincisi videoya göre düşük bant genişliği kullanımı, ikincisi ise kolay kurulum. Bir başka büyük avantaj da, taşınabilirlik ve diğer cihaz uyumluluğu sorunları hakkında endişelenmenize gerek kalmamasıdır.

Animasyon, CSS kullanılarak kolayca oluşturulabilir veya normal arka plan değişikliği yoluyla yüklenebilir.

Video arka planının karmaşıklığı biraz üsttedir ve WordPress topluluğu veya çekirdek ekip bunu not alabilir ve gelecek sürümlerinde değişiklik yapabilir.

Bir videonuz varsa ve bir gif'e dönüştürmek istiyorsanız, bunu sizin için yapabilecek çevrimiçi kaynaklar var. Ancak dönüştürülen GIF optimize edilmemiştir ve yanlarında çok fazla ağırlık taşır.

Ve yerleştirmeyi planladığınız videoda ayarlamalar yapmanız gerektiğinde, birkaç harika ücretsiz video düzenleyici bulabilirsiniz. Bir videoyu kesmeniz, kırpmanız veya yakınlaştırmanız, metin eklemeniz veya muhtemelen renk temasını web sitenizin stiline uyacak şekilde ayarlamanız gerekebilir.

Mac kullanıyorsanız, doğal olarak iMovie ile gidebilirsiniz çünkü bilgisayarınızda önceden kuruludur (değilse ücretsiz olarak alabilirsiniz). Ve eğer Windows kullanıyorsanız – VSDC Free Video Editor harika bir seçimdir. Temel bölme/kırpma araç setinden renk düzeltmeye ve video stili ön ayarlarına kadar ihtiyacınız olabilecek her şeye sahiptir. Ayrıca, konu biçimler olduğunda gerçekten güçlüdür ve çıktı dosyasının kalitesinden ödün vermenize gerek kalmaz.

Sizce bir şey kaçırdım mı? Aşağıda yorum yapın ve bize bildirin.

*son güncelleme 25.02.2019