Videoyu Divi ile Kullanmak İçin En İyi Kılavuz

Video güçlü bir araçtır. Bir görüntü bin kelimeye bedelse, bir dakikalık video 1.8 milyon kelimeye bedeldir (En azından araştırmacı Dr. James McQuivey'nin önerdiği şey budur). Video, etkili bir pazarlama aracıdır ve doğru yapıldığında güzel tasarım için bir araçtır.

Divi ile web sitenize video eklemek çok kolay. Video ve video kaydırıcı modülleri, yalnızca video URL'sini girerek youtube ve vimeo gibi üçüncü taraflarca barındırılan videoları eklemenize olanak tanır. Maksimum tarayıcı uyumluluğu için hem mp4 hem de webm formatlarında kendi özel videolarınızı bile ekleyebilirsiniz. Üstüne üstlük Divi, sitenizin tasarımına uymanıza yardımcı olacak görüntü bindirmeleri ve oynatma düğmeleriyle videolarınızı şekillendirme seçeneği sunar.

Divi, sayfanıza video yerleştirmenin yanı sıra arka plan videoları eklemek için basit bir çözüm de sunar. Şu anda Divi oluşturucu ile bir site oluşturduğunuzda, her bölüm, satır, sütun ve 37 modülden 20'si arka plan video özelliğine sahiptir.

Çoğu kişi için Divi'de Video'yu kullanmak, istediğiniz YouTube veya Vimeo videosunun bağlantısını eklemek ve yayınınızda veya sayfanızda görünmesini görmek kadar kolaydır. Ancak bu gönderide, herhangi bir özel kullanım durumu, benzersiz stiller veya çalıştırmak isteyebileceğiniz yaratıcı deneyler için tam donanımlı olmanız için Divi'nin video ile yaptığı şeyi nasıl ve neden yaptığı hakkında konuşacağız.

Bu kılavuzda tartışacağız…

• Video Modülü ve Video Slider Modülünün perde arkası çalışmaları, böylece daha etkin bir şekilde kullanabilirsiniz.
• videolarınızı kendi kendine barındırma ve üçüncü taraf bir barındırma kullanma arasındaki fark.
• videolarınızı web için optimize etmeyle ilgili bazı ipuçları.
• Video Arka Planları için en iyi uygulamalar.
• video boyutlarını seçmek için genel bir kılavuz.
• ve arka plan videoları için birkaç faydalı tüyo.

Başlayalım.

Video Modülünü Keşfetmek

Video modülü, hemen hemen her kaynaktan videolarınızı sayfanıza gömmenizi sağlar. Divi'nin video modülüyle ilgili belgeleri, tüm özellikleri ve sayfanıza nasıl video ekleyeceğinizi açıklar. Ancak bu yazı için biraz daha derine ineceğim.

Video Modülüne Kendi Kendine Barındırılan Video Ekleme

Video modülüyle kendi kendine barındırılan bir video eklemek için Video ayarlarında bir video yüklemeniz veya video dosyasına bir url eklemeniz gerekir. Ve videonuzu iki dosya biçiminde eklemelisiniz.

Ve gerçekten yapmanız gereken tek şey bu. Yeterince basit.

Ancak sahne arkasında Divi, videoyu görüntülemek için HTML5 video öğesini kullanıyor. Kendi kendine barındırılan bir video eklemeyi veya mp4 ve webm biçimlerini kullanarak kendi videonuzu yüklemeyi seçtiğinizde, Divi'nin dağıttığı kodun yapısı aşağıdaki gibi görünür:

<video controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.webm" type="video/webm">
Error loading this resource
</video>

İşte bu kodun ne yaptığı hakkında belirtmek istediğim birkaç şey:

1. <video> etiketi içindeki kontroller özniteliğine dikkat edin. Bu, videoya kontrolleri görüntülemesini söyler. Yeterince basit.
2. Açılış ve kapanış <video> etiketlerindeki iki <source> etiketine dikkat edin. Kaynaklar video dosyalarından oluşmaktadır. Birincisi bir mp4 ve ikincisi bir webm dosya formatıdır. Her ikisi de maksimum tarayıcı desteği için gereklidir. Sıra da önemlidir. Evrensel olarak en çok desteklenen mp4 olduğundan tarayıcının önce mp4'ü görmesini istiyorsunuz. Bu formatlar hakkında daha sonra konuşacağım.
3. İlk iki format tanınmazsa, “Bu kaynak yüklenirken hata oluştu” yazan satır görüntülenecektir.
4. Göremediğiniz şey, Divi'nin bu <video> etiketinin stilini ve yanıt vermesini sağlamak için %100 genişlik vermiş olmasıdır, böylece videonuz oturduğu sütunun genişliğine göre ayarlanır.

Bu HTML5 video öğesi, videoyu web'de göstermenin yeni standart yolu olarak büyüyor. Neyse ki Divi bu işi bizim için hallediyor.

Kendi Kendine Barındırılan Video Görüntüsü Yer Paylaşımı

Videolarınızı Video Modülüne ekleme seçeneğinin yanı sıra Divi, videonuz için özel bir kaplama görüntüsü eklemenize de olanak tanır.

Kendiniz barındırdığınız videonuza bir bindirme görseli eklemeyi seçerseniz, kendi videonuzu yüklemeniz gerekir. Videodan görüntü oluşturma seçeneği yalnızca Youtube ve Vimeo gibi üçüncü taraflarca barındırılan video URL'leri için geçerlidir.

Görüntü, videonun boyutuna dönüşeceğinden ve video, oturduğu sütunun boyutuna göre ayarlanacağından, doğru boyutta görüntüyü seçmek önemlidir. Youtube, Vimeo ve diğer birçok formattaki videolar genellikle 16:9 en boy oranına sahiptir. Bu nedenle, maksimum içerik genişliğinizi Divi'nin varsayılan değeri olan 1080 piksele ayarladıysanız, 16:9 en boy oranını takiben videonuz 1080×608 boyutlarına sahip olacaktır. Bu nedenle bindirme resminiz 1080×608 piksel olmalıdır.

Oynat Düğmesi

Görüntünüz ayarlandıktan sonra Divi otomatik olarak özel bir oynatma düğmesi uygulayacaktır. Tasarım sekmesinin altındaki Video Ayarında isterseniz düğmenin rengini de değiştirebilirsiniz.

Kullanıcı, özel oynatma düğmesiyle kaplamayı tıkladığında, kaplama ve düğme kaybolacak ve kaplamanın altındaki video otomatik olarak oynatılmaya başlayacaktır.

Üçüncü Tarafta Barındırılan Video URL'si Ekleme

Video Modülüne video eklemenin en yaygın yöntemi, Youtube veya Vimeo gibi bir üçüncü tarafça barındırılan bir videonun URL'sini eklemektir. Bu nedenle, kendi kendine barındırılan videolar için yaptığınız gibi iki video biçimi eklemek yerine, üst arka plan giriş çubuğuna bir URL eklemeniz yeterlidir.

Sahne arkasında Divi, değişken genişlikte bir sarmalayıcı div ekler ve videoyu görüntüleyen bir iframe yerleştirir. Bu iframe, doğrudan youtube'dan alacağınızla aynıdır. Video modülüyle bir youtube videosu eklerken kodun nasıl göründüğüne bir örnek:

<div class="fluid-width-video-wrapper" style="padding-top: 56.2963%;">
<iframe src="https://www.youtube.com/embed/Nimdf3Zeayk?autoplay=1&amp;amp;feature=oembed&amp;amp;wmode=opaque" frameborder="0" allowfullscreen="" id="fitvid0">
</iframe>
</div>

"Fluid-width-video-wrapper" sınıfına sahip div, iframe'in etrafını sarar ve ona %100 genişlik verir, böylece onu duyarlı hale getirmek için kabının genişliğine uyum sağlar.

Bir bindirme görüntüsü eklemeyi seçerseniz, kendinizinkini yüklemeyi seçebilir veya biraz baş ağrısından tasarruf etmek için "videodan oluştur" u tıklayabilirsiniz ve Divi otomatik olarak videodan alınan bir bindirme görüntüsünü uygulayacaktır. Oynat düğmesini özelleştirmeyi de seçebilirsiniz.

Video Kaydırıcı Modülünü Keşfetme

Video kaydırıcı, videoların bir web sayfasında dağıtılma şekliyle video modülüne çok benzer şekilde çalışır, ancak artık videolar bir kaydırıcıdadır. Bu, videoları tek bir yerde görüntülemenin uygun bir yoludur, böylece kullanıcılarınız tek seferde bir grup videoyu kolayca kaydırabilir. Video Slider Modülü seçenekleri hakkında daha fazla ayrıntı için dokümantasyon sayfasını ziyaret edebilirsiniz.

Video kaydırıcısının en sevdiğim öğelerinden biri, slaytları kontrol etmek için kullanabileceğiniz küçük resim izidir. Hem kullanışlı hem de ilgi çekici.

Küçük Resim Kaplama Rengi dahil olmak üzere modül ayarlarından kaydırıcı kontrollerinin renklerini bile özelleştirebilirsiniz.

Küçük resimler yüklediğiniz orijinal resmin boyutunda kalacaktır, bu nedenle sitenizi yavaşlatabileceğinden kaydırıcınıza bir sürü büyük resim yüklememeye dikkat edin. Ayrıca, küçük resimler videodan otomatik olarak oluşturulamaz. Bunları kendiniz yüklemelisiniz.

Küçük resimler 4:3 en boy oranını takip eder, bu nedenle 16:9 kaydırıcı resimlerinizi ayarlamak için, tüm alanı kaplamak için patlayacak ve görüntünün sağını ve solunu kesecektir.

Tasarım İpucu : Dosya boyutunu küçültmek ve küçük resimlerinizin görüntünün bir kısmını kesmesini önlemek için yapabileceğiniz bir püf noktası, küçük resimlerinizi 253×190 piksel (4:3 en boy oranı) olacak şekilde özelleştirmek ve gizleme seçeneğini belirlemektir. ana videoda görüntü bindirmeleri görüntüleyin. Bu şekilde bindirme resimleriniz yalnızca küçük resimler için kullanılacak ve bu nedenle ana video boyutunu ayarlamak için daha büyük olmalarına gerek kalmayacak.

Videolarınızı Kendi Kendine Barındırmak İçin 4 Önemli İpucu

1. Bir CDN kullanın. Videolarınızı WordPress Medya Kitaplığı aracılığıyla eklemeyi düşünüyorsanız, tekrar düşünün. Videoları kendi sunucunuzda kendi WordPress kurulumunuzda barındırmak mümkün olsa da, muhtemelen bant genişliği, dosya boyutu, depolama alanı vb. ile ilgili bazı sınırlamalarla karşılaşacaksınız, bu da sitenizin yükleme süresinin azalmasına ve video akışının gecikmesine neden olabilir. . Videolarınızı Amazons3 gibi harici bir hizmette barındırmayı düşünürdüm. Bu, sayfa yükleme sürelerine yardımcı olacaktır. Ayrıca, bu sağlayıcılardan bazıları, insanların videolarınızı indirmesini engellemek (veya en azından indirmeyi zorlaştırmak) için bir güvenlik düzeyi sunar.
2. Web için Dosyayı Optimize Edin. Videolar, özellikle büyük bir video arka planı kullanırken çok fazla bant genişliği kaplar. Sayfanızı aşırı yüklememeye dikkat etmeniz gerekecektir. Videonuzu web için uygun şekilde optimize etmek istiyorsanız göz önünde bulundurmanız gereken birkaç faktör vardır. İşte dikkate alınması gereken yararlı bir denklem:
   dosya boyutu = bit hızı(kilobit/saniye) x süre (saniye cinsinden videonun uzunluğu)

   Bu nedenle, daha küçük bir dosya boyutu elde etmek istiyorsanız, süreyi (video uzunluğu) ve/veya bit hızını (iletilen saniyede kilobit sayısı) azaltmanız gerekir. Bit hızı her zaman kullanıcının bağlantı hızından daha düşük olmalıdır. Dünya çapındaki internet hızının 7 Mbps civarında olduğu düşünüldüğünde (ABD 18 Mbps civarındadır), akışta bir kesintiyi önlemek için bit hızını bunun çok altında tutmak isteyeceksiniz.

   Tüm bunları kendi başınıza yapmak zorunda değilsiniz. El Freni gibi video sıkıştırmada size yardımcı olacak harika ücretsiz araçlar var.

   Videolarınızı web için optimize etme hakkında daha fazla bilgi edinmek istiyorsanız “Daha Hızlı Yükleme için Video Boyutunu Küçültmenin En İyi 5 Yolu”nu okumanızı öneririm. Listelenen bazı harika kaynaklar ve El Freni'nin nasıl kullanılacağına dair harika bir açıklama var.

3. Doğru Dosya Biçimlerini Ekleyin.
   Daha önce de belirttiğim gibi, videolarınızı kendiniz barındırıyorsanız (Youtube gibi sizin için barındırması için üçüncü bir tarafa güvenmiyorsanız), videonuzu hem mp4 hem de webm formatlarında eklemeniz gerekecektir.

   Mp4 şu anda en yaygın olarak desteklenen formattır çünkü hala bazı eski tarayıcıları flash kullanarak oynatır ve mobil tarayıcı desteği için standarttır. Divi, iOS cihazlarının dosyayı hemen tanıyabilmesi için kodda önce mp4'ü listeler.

   Webm, en çok desteklenen ikinci biçimdir. Web için inşa edildi ve burada kalacak gibi görünüyor. Mükemmel sıkıştırma ile yüksek kaliteli akış üretir. Ve açık kaynaktır.

   Bu ikisi birlikte, mobil dahil çoğu web tarayıcısı için destek sunar.

   Harika bir ücretsiz dönüştürme aracı, VLC medya oynatıcı olacaktır.

4. MIME Türlerini Tanımlayın: WEBM video formatının tüm tarayıcılarda çalışabilmesi için sunucunuzun doğru MIME türlerinin atanmış olması gerekir. MIME türlerini tanımlamak için .htaccess kullanımı hakkında daha fazla bilgiyi burada bulabilirsiniz. Videolarınızın belirli tarayıcılarda oynatılmadığını fark ederseniz, bunun nedeni büyük olasılıkla budur. .htaccess dosyanıza MIME türleri eklemek için WordPress kök dosyalarınıza erişmek için bir FTP istemcisi (FileZilla gibi) kullanın. Orada .htaccess dosyanızı bulmalısınız. Dosyayı bir metin düzenleyicide açın. “#END WordPress” yazan satırın altına aşağıdakileri ekleyin:

   AddType video/mp4 .mp4 .m4v
   AddType video/ogg .ogv
   AddType video/webm .webm

   

   Ardından dosyayı kaydedin. Artık video formatlarınız tüm tarayıcılarda tanınacak.

Üçüncü Taraf Platformlarla Barındırma (Youtube ve Vimeo)

Kendi videolarınızı dönüştürmenin ve sıkıştırmanın çok fazla iş olduğunu düşünüyorsanız, işi her zaman üçüncü bir tarafın sizin için yapmasına izin verebilirsiniz.

Video hakkında hiçbir şey bilmiyorsanız, bu rotayı izlemenizi öneririm. Youtube veya vimeo free'nin sınırlamaları konusunda deli değilseniz, Vimeo Pro için kurşunu ısırabilirsiniz. Uzun vadede baş ağrısına değebilir. İstemediğiniz şey, sitenize yavaşlatan veya kötü görünen bir video koymaktır. Buna değmez.

Video ve Video Slider Modülleri tarafından desteklenen Üçüncü Taraf Video Platformları

Üçüncü taraf videolarınızı eklemek için Video ve Video Kaydırıcı Modüllerini kullanmak istiyorsanız, aşağıdaki popüler platformları kullanabilirsiniz:

• Youtube
• video
• Günlük hareket

Divi Kullanarak Üçüncü Taraf Videoları Nasıl Eklenir

Bu platformlardan herhangi birinden video eklemek için paylaşım bağlantısını almak için sitelerine gitmeniz gerekir.

Ardından bunu Video veya Video Kaydırıcı Modülüne yapıştırabilirsiniz.

Bir imag yer paylaşımı eklemek için "Videodan Oluştur" düğmesini tıklayın. Veya kendinizden birini yükleyin.

Ayarları kaydet. Ve bu kadar.

Divi'nin WordPress üzerine kurulduğunu unutmayın, böylece Video Modülünü kullanmadan önerilen yerleştirme kodlarını kullanarak her zaman üçüncü taraf platformlardan videolar gömebilirsiniz. Basitçe bir metin modülü ekleyin ve içerik kutusunun içine yerleştirme kodunu girin.

Duyarlı bir düzen için ayarlamak üzere yerleştirmenizin genişliğini ve yüksekliğini özelleştirmeniz gerekebilir.

Wistia'ya ne dersin?

Wistia, birçok kişinin kullandığı güçlü bir platform ama maalesef şu anda Divi modülleriyle pek iyi çalışmıyor. Ancak, sağladıkları yerleştirme kodunu kullanarak Wistia'yı gömebilirsiniz.

Bu kodu Divi sitenizdeki bir içerik bölümüne yapıştırmak videoyu gösterecektir.

Slaytlarınızdan biri olarak bir wistia videosu eklemek için kodu kaydırıcı modülünün içerik bölümüne bile yapıştırabilirsiniz. Ancak, istediğiniz gibi görünmesini sağlamak için biraz CSS ayarlamanız gerekecek.

Divi ile Video Arka Planlarını Kullanma

Bir Video Arka Planı Kullanmalı mısınız?

Video arka planlarının ayrıntılarına girmeden önce, kendinize bir tane kullanıp kullanmayacağınızı dürüstçe sormanız önemlidir. Beni yanlış anlama, iyi bir video arka planını seviyorum. Ama bazen mantıklı gelmiyor. Hata yapmayın, videolar sitenizi yavaşlatır ve içeriğinizin dikkatini dağıtabilir. Bu yüzden asla daha etkili bir görüntü yerine bir video arka planı seçmeyin. Siteniz biri olmadan daha iyi olabilir.

Ancak, videonun bir görüntüden daha iyi bir çözüm olduğu zamanlar vardır. Doğru yapıldığında, bir video arka planı içeriğinize hayat verebilir. Bu nedenle, videonuzu amaca yönelik yapın ve saymasını sağlayın.

Divi'deki Video Arka Planı Özellikleri

Divi Builder'ı kullanarak neredeyse istediğiniz her yere video arka planı ekleyebilirsiniz. Her Bölüm, Satır ve Sütuna bir video arka planı ekleyebilirsiniz. Çoğu modüle video arka planları bile ekleyebilirsiniz.
İşte video arka planlarını destekleyen modüller.

• Fullwidth Header (tam ekran seçeneğinde de çalışır)
• Tam Genişlik Menüsü
• Tam Genişlikli Portföy
• Fullwidth Post Slider (Öne çıkan görseli kullanmadığınızda, tüm slaytlar için arka plan olarak hizmet etmesi için bir video arka planı kullanabilirsiniz)
• Tam Genişlikli Gönderi Başlığı
• Tam Genişlik Kaydırıcısı (bireysel slaytlarla çalışır)
• Ses modülü
• Bar Sayaçları
• Blurb Module – modüle biraz dolgu eklediğinizden emin olun.
• Eyleme çağrı modülü
• Geri sayım saati
• E-posta Seçeneği
• Filtrelenebilir portföy
• Giriş Modülü
• Sayı Sayacı Modülü
• Kişi Modülü
• Portföy Ayarları
• Post Slider (Öne çıkan görseli kullanmadığınızda, tüm slaytlar için arka plan olarak hizmet etmesi için bir video arka planı kullanabilirsiniz)
• Yazı başlığı
• Fiyatlandırma tablosu (Modül ve farklı tablolar için ayrı ayrı video arka planı belirleyebilirsiniz)
• Kaydırıcı (yalnızca tek tek slaytların arka planları için)
• Sekmeler (hem modül arka planı hem de ayrı sekmeler için)
• referans
• Metin
• Aç/Kapat

Stok Video Kitaplıkları

Sitenize video arka planı eklemenin zor yanı, doğru resmi bulmak ve doğru boyutta olduğundan emin olmaktır. Neyse ki, kendi özel video arka planlarınızı oluşturmak zorunda değilsiniz. Web siteniz için iyi çalışabilecek telifsiz stok video kitaplıkları mevcuttur. Bazı ücretsiz video görüntüleri arıyorsanız, başlamak için bazı iyi yerler video, coverr veya videoezy olacaktır. Daha kaliteli ücretli sürümler arıyorsanız, videohive, videoblocks veya pond5'e göz atabilirsiniz. Biraz ilham arıyorsanız, bu sitelerden bazıları video arka planlarını gerçekten iyi kullanıyor.

Sayfanıza Video Arka Planı Nasıl Eklenir

Doğru videoyu bulduktan (veya yarattıktan) sonra işler gerçekten kolaylaşıyor. Divi web sayfanıza bir video arka planı eklemek için görsel oluşturucuyu dağıtın ve videoyu eklemek istediğiniz bölümü bulun ve Bölüm Ayarları simgesine tıklayın.

İçerik sekmesi altında, Arka Plan seçenekleri altındaki arka plan resmi simgesini/sekmesini tıklayın. Kendi kendine barındırılan bir videonuz varsa, hem mp4 hem de webm biçimlerini girin. Ardından videonun boyutlarını girin, böylece Divi videoyu doğru şekilde nasıl boyutlandıracağını bilir.

Şimdi arka plan resmi sekmesine gidin ve mobil cihazlar için iyi bir geri dönüş görevi görecek bir arka plan resmi ekleyin.

Ardından ayarları kaydedin. Bu kadar basit.

Şu anda youtube'da (veya vimeo'da) barındırdığınız videolarınızdan birini arka plan olarak kullanmayı planlıyorsanız, bu Divi oluşturucuda şu anda mümkün değildir. Bu videoların tüm tarayıcılarda gösterilmesi için doğru biçimlerde olması gerektiğini unutmayın. Ancak o Youtube videosunu (size aitse) indirebilir ve arka planda kullanmak üzere mp4 ve webm formatlarına dönüştürebilirsiniz.

Arka Plan Tasarımı İpucu: Tam Genişlikli Gönderi Kaydırıcınız için Video Arka Planı Kullanma

Öne çıkan gönderilerinizi blog sayfanızda sergilemenin yaratıcı bir yolunu arıyorsanız, gönderi kaydırıcınıza bir video arka planı ekleyebilirsiniz. Sana ne demek istediğimi göstereyim.

Visual Builder'ı kullanarak sayfanıza gidin ve tam genişlikte bir gönderi kaydırıcı modülüyle sayfanın en üstüne bir Tam Genişlik Bölümü ekleyin.

İçerik sekmesinin altında, Öne Çıkan Görseli Göster altında “HAYIR”ı seçin.

Ardından Arka Plan bölümünün altında, video arka planı sekmesini seçin ve boyutlarıyla birlikte videonuzun her iki biçimini de ekleyin.

Video arka planlarını görüntüleyemeyen mobil cihazlar için yedek olarak bir arka plan resmi eklemek de iyi bir fikirdir.

Bu kadar.

Artık kullanıcı, harika bir arka plan videosu ile öne çıkan gönderi kaydırıcınızda gezinebilir. Sadece video arka planının dikkati içerikten uzaklaştırmayacak kadar ince olduğundan emin olun.

Video Arka Planları için En İyi Uygulamalar

Video arka planlarının sağladığı tüm olanaklarla birlikte, bazı genel en iyi uygulamaları dahil etmenin en iyisi olduğunu düşündüm.

1. Mobil cihazlar için yedek olarak her zaman bir arka plan resmi ekleyin. Mobil cihazlar büyük videoları otomatik olarak oynatmaz. Bu nedenle Divi, mobil cihazlarda varsayılan olarak yedek görüntüyü gösterir.
2. Küçük bir video kullanın. Arka plan videoları için, arka plan, videoyu kaplayan içerik/metin için ikinci bir düşünce olduğundan 720p çözünürlükten kurtulabilirsiniz. Kalite fark edeceğiniz kadar acı çekmez.
3. Bir kaplama düşünün. Videonun üstüne yarı saydam bir renk katmanı eklemek, daha az kaliteli bir videonun karmaşık ayrıntılarını gizleyeceğinden, daha küçük bir dosya boyutundan kurtulmanıza yardımcı olur. Ayrıca metninizin daha fazla öne çıkmasını sağlayacaktır.
4. Ses kullanmayın. Video arka planı için sese ihtiyacınız yok, bu yüzden onu çıkarın. Bu, dosya boyutunu azaltacaktır.
5. Çapraz tarayıcı desteği için hem mp4 hem de webm biçimlerini kullanın.

Video Duraklatılsın mı?

Bu seçeneğin arka plan seçenekleri altındaki ayarlarda listelendiğini görmüş olabilirsiniz.

Bazı durumlarda video, arka planda çalan başka bir videoyla çakışabilir. Bu seçenek, aynı anda yalnızca bir video sesinin oynatılmasına yardımcı olur.

Divi Video Hack'leri

Yararlı bulabileceğiniz birkaç tane daha gelişmiş video ve video arka planı özelleştirmesi var. Burda biraz var.

Oynat Düğmenizi Yeniden Boyutlandırın

Oynatma düğmenizin boyutunu değiştirmek isterseniz, Gelişmiş sekmesinin altındaki Video Modülü ayarlarına gidin ve “Video Simgesi” etiketli kutuya aşağıdaki özel CSS'yi girin:

Font-size: 10rem;
Line-height: 10rem;
Margin-top: -5rem;
Margin-left: -5rem;

Değerleri istediğiniz boyuta ayarlayabilirsiniz. Yazı tipi boyutu ve satır yüksekliğinin her zaman aynı kaldığından ve kenar boşluğu üst ve kenar boşluğu alt değerlerinin her zaman yazı tipi boyutunun yarısı olan negatif bir değer olarak kaldığından emin olun. Örneğin, daha küçük yapmak isteseydiniz, değerler şöyle olurdu.

Font-size: 4rem;
Line-height: 4rem;
Margin-top: -2rem;
Margin-left: -2rem;

Video Arka Planının Tıklamada Duraklatılması Nasıl Durdurulur

Bazı durumlarda, video arka planınıza tıklamanın videoyu duraklattığını görebilirsiniz. Alt temanızdaki (veya tema özelleştirici > Ek CSS'deki) style.css dosyanıza aşağıdaki Özel CSS'yi ekleyerek bu özelliği devre dışı bırakabilirsiniz:

.et_pb_section_video_bg video {
pointer-events: none;
}

Döngüden Video Arka Planı Nasıl Durdurulur

Bu ipucunu eski yazılarımızdan birinden hatırlamış olabilirsiniz. Varsayılan olarak, video arka planı döngüye devam edecektir. Bu kasıtlıdır çünkü normalde bir video arka planının yapmasını istediğiniz şey budur. Ancak arka plan videonuzu yalnızca bir kez göstermek ve ardından çıkmak istiyorsanız, Divi > Tema Seçenekleri > Entegrasyon'a giderek döngü eylemini devre dışı bırakabilir ve aşağıdakileri girerek:

<script>
(function($) {
    $(document).ready(function() {
        $('.no-loop .et_pb_section_video_bg').each(function() {
            $(this).find('video').removeAttr('loop');
        });
    });
})(jQuery);
</script>

Divi için Video Boyutları

Video boyutlarından bahsetmeden yazımı bitirmek istemedim. Tüm videolar ve web siteleri farklı olduğu için hangi boyutların kullanılacağına dair kesin bir kural yoktur. Bir 720p (1280×720) video 1920×1080 ekranda harika görünebilirken bir diğeri korkunç görünebilir. Siteniz için bir videonun boyutlarına veya çözünürlüğüne karar verirken, genel bir kılavuz olarak Divi'nin sütun düzenleri ve modülleri için görüntü boyutlarını takip edebilirsiniz. Basitçe söylemek gerekirse, videonuzun altına girmeden oturduğu sütunun genişliğine en yakın olması gerekir. Bu nedenle, maksimum 1080 piksel genişliğe sahip tam genişlikte bir sütununuz varsa, 720p'den (1280×720) daha yüksek çözünürlüğe sahip bir videoya ihtiyacınız olmamalıdır. Ancak, tarayıcınızın tüm genişliğini kapsayan bir video arka planı kullanıyorsanız, 1080p'ye (1920×1080) kadar çıkmanız gerekebilir, böylece daha büyük monitörlerde tarayıcının tüm genişliğini kapladığında, grenli bak.

Videolarınızı web için hazırlamak için üçüncü taraf bir video uzmanına güvenecekseniz, youtube için önerilen video çözünürlüklerinin bir listesi burada.

2160p: 3840×2160
1440p: 2560×1440
1080p: 1920×1080
720p: 1280×720
480p: 854×480
360p: 640×360
240p: 426×240

Bunlar, videonun kenarlarındaki siyah çubukları görmemeniz için 16:9 en boy oranını takip eder.

Vimeo ayrıca videolar için yönergeler verir. Özellikle Vimeo'nun video sıkıştırma temelleri hakkındaki gönderisini seviyorum.

Son düşünceler

Videolar, uzun süre çevrimiçi deneyimimizin ayrılmaz bir parçası olmaya devam edecek. Bu nedenle, web sitenize video eklerken ne yaptığınızı bilmeniz önemlidir. Web sitenizde video kullanmaya karar verirseniz, Divi, kendi kendine barındırılan videolar için bir çapraz tarayıcı çözümü ve üçüncü taraf yerleştirmeleri için uygun bir çözüm sağlayarak süreci son derece basit hale getirir. Ama Divi sizin için her şeyi yapamaz. Umarım bu yazı, doğru videoyu seçme ve web için hazırlama sürecinde size yardımcı olur.

Yorumlarda sizden haber bekliyorum.