Panduan Utama untuk Menggunakan Video dengan Divi

Video adalah alat yang ampuh. Jika sebuah gambar bernilai seribu kata maka satu menit video bernilai 1,8 juta kata (Setidaknya itulah yang disarankan oleh peneliti Dr. James McQuivey). Video adalah alat pemasaran yang efektif dan, jika dilakukan dengan benar, menjadi alat untuk desain yang indah.

Menambahkan video ke situs web Anda mudah dilakukan dengan Divi. Modul penggeser video dan video memungkinkan Anda menambahkan video yang dihosting pihak ketiga seperti youtube dan vimeo hanya dengan memasukkan url video. Anda bahkan dapat menambahkan video kustom Anda sendiri dalam format mp4 dan webm untuk kompatibilitas browser maksimum. Untuk melengkapinya, Divi memberi Anda opsi untuk menata video Anda dengan hamparan gambar dan tombol putar untuk membantu mencocokkan desain situs Anda.

Selain menyematkan video di halaman Anda, Divi juga menyediakan solusi sederhana untuk menambahkan video latar belakang. Saat ini, ketika Anda membangun situs dengan pembuat Divi, setiap bagian, baris, kolom, dan 20 dari 37 modul memiliki kemampuan video latar belakang.

Bagi kebanyakan orang, menggunakan Video dalam Divi semudah memasukkan tautan ke video YouTube atau Vimeo yang Anda inginkan dan melihatnya muncul di pos atau halaman Anda. Tetapi dalam posting ini kita akan berbicara tentang bagaimana dan mengapa Divi melakukan apa yang dilakukannya dengan video sehingga Anda sepenuhnya siap untuk kasus penggunaan khusus, gaya unik, atau eksperimen kreatif apa pun yang mungkin ingin Anda jalankan.

Dalam panduan ini kita akan membahas…

• di balik layar cara kerja Video Module dan Video Slider Module sehingga Anda dapat menggunakannya dengan lebih efektif.
• perbedaan antara menghosting sendiri video Anda dan menggunakan host pihak ketiga.
• beberapa kiat tentang mengoptimalkan video Anda untuk web.
• praktik terbaik untuk Latar Belakang Video.
• panduan umum untuk memilih dimensi video.
• dan beberapa peretasan bermanfaat untuk video latar belakang.

Mari kita mulai.

Menjelajahi Modul Video

Modul video memungkinkan Anda untuk menyematkan video ke halaman Anda dari hampir semua sumber. Dokumentasi Divi pada modul video menjelaskan semua fitur dan cara menambahkan video ke halaman Anda. Tapi untuk postingan kali ini, saya akan menggali lebih dalam.

Menambahkan Video yang Dihosting Sendiri ke Modul Video

Untuk menambahkan video yang dihosting sendiri dengan modul video, Anda harus mengunggah video atau menambahkan url ke file video dalam pengaturan Video. Dan, Anda harus menambahkan video Anda dalam dua format file.

Dan hanya itu yang benar-benar perlu Anda lakukan. Cukup sederhana.

Namun, di balik layar, Divi menggunakan elemen video HTML5 untuk menampilkan video. Saat Anda memilih untuk menambahkan video yang dihosting sendiri atau mengunggah video Anda sendiri menggunakan format mp4 dan webm, struktur kode yang disebarkan Divi terlihat seperti berikut:

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

Berikut adalah beberapa hal yang ingin saya tunjukkan tentang apa yang dilakukan kode ini:

1. Perhatikan atribut kontrol dalam tag <video>. Ini memberitahu video untuk menampilkan kontrol. Cukup sederhana.
2. Perhatikan dua tag <source> di dalam tag pembuka dan penutup <video>. Sumber terdiri dari file video. Yang pertama adalah mp4 dan yang kedua adalah format file webm. Keduanya diperlukan untuk dukungan browser yang maksimal. Urutannya juga penting. Anda ingin browser melihat mp4 terlebih dahulu karena ini adalah yang paling didukung secara universal. Saya akan membahas lebih lanjut tentang format ini nanti.
3. Baris yang bertuliskan "Error loading this resource" akan ditampilkan jika dua format pertama tidak dikenali.
4. Apa yang tidak dapat Anda lihat adalah bahwa Divi telah memberi gaya pada tag <video> ini dan memberinya lebar 100% untuk membuatnya responsif sehingga video Anda akan menyesuaikan dengan lebar kolom tempatnya berada.

Elemen video HTML5 ini berkembang sebagai cara standar baru untuk menampilkan video di web. Untungnya, Divi menangani ini untuk kami.

Hamparan Gambar Video yang Dihosting Sendiri

Selain opsi untuk menambahkan video Anda ke Modul Video, Divi juga memungkinkan Anda untuk menambahkan gambar overlay khusus untuk video Anda.

Jika Anda memilih untuk menambahkan gambar hamparan ke video yang dihosting sendiri, Anda harus mengunggahnya sendiri. Opsi untuk menghasilkan gambar dari video hanya berlaku untuk URL video yang dihosting pihak ketiga seperti Youtube dan Vimeo.

Karena gambar akan menjadi ukuran video dan karena video akan menyesuaikan dengan ukuran kolom tempat duduknya, penting untuk memilih ukuran gambar yang tepat. Video dari Youtube, Vimeo, dan sebagian besar format lainnya biasanya memiliki rasio aspek 16:9. Jadi, jika Anda memiliki lebar konten maksimum yang disetel ke default Divi 1080px, maka mengikuti rasio aspek 16:9 video Anda akan memiliki dimensi 1080x608. Oleh karena itu gambar overlay Anda harus 1080x608 piksel.

Tombol Putar

Setelah gambar Anda disetel, Divi akan secara otomatis menerapkan tombol putar khusus. Anda bahkan dapat mengubah warna tombol jika Anda mau di Pengaturan Video di bawah tab Desain.

Setelah pengguna mengklik overlay dengan tombol putar khusus, overlay dan tombol akan hilang dan video di bawah overlay akan mulai diputar secara otomatis.

Menambahkan URL Video yang Dihosting Pihak Ketiga

Metode paling umum untuk menambahkan video ke Modul Video adalah dengan menambahkan URL video yang dihosting oleh pihak ketiga seperti Youtube atau Vimeo. Jadi, alih-alih menambahkan dua format video seperti yang Anda lakukan untuk video yang dihosting sendiri, Anda cukup menambahkan URL di bilah masukan latar belakang atas.

Di balik layar, Divi menambahkan div pembungkus lebar yang cair dan menyematkan iframe yang menampilkan video. Iframe ini sama seperti yang Anda dapatkan dari youtube secara langsung. Berikut adalah contoh tampilan kode saat menambahkan video youtube dengan modul video:

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

Div dengan kelas "fluid-width-video-wrapper" membungkus iframe dan memberinya lebar 100% sehingga akan menyesuaikan dengan lebar wadahnya sehingga responsif.

Jika Anda memilih untuk menambahkan gambar overlay, Anda dapat memilih untuk mengunggah sendiri atau, untuk menghemat sedikit sakit kepala, Anda cukup mengklik "hasilkan dari video" dan Divi akan secara otomatis menerapkan gambar overlay yang diambil dari video. Anda juga dapat memilih untuk menyesuaikan tombol putar.

Menjelajahi Modul Slider Video

Penggeser video bekerja sangat mirip dengan modul video dalam cara video disebarkan di halaman web, kecuali sekarang video berada di penggeser. Ini adalah cara yang nyaman untuk menampilkan video di satu tempat sehingga pengguna Anda dapat dengan mudah menggulir sekelompok video satu per satu. Untuk detail lebih lanjut tentang opsi Modul Slider Video, Anda dapat mengunjungi halaman dokumentasi.

Salah satu elemen favorit saya dari penggeser video adalah trek thumbnail yang dapat Anda gunakan untuk mengontrol slide. Hal ini nyaman dan menarik.

Anda bahkan dapat menyesuaikan warna kontrol slider dari pengaturan modul termasuk Thumbnail Overlay Color.

Gambar mini akan tetap seukuran gambar asli yang Anda unggah, jadi berhati-hatilah untuk tidak mengunggah banyak gambar besar di penggeser Anda karena ini dapat memperlambat situs Anda. Juga, thumbnail tidak dapat dibuat secara otomatis dari video. Anda harus mengunggahnya sendiri.

Thumbnail mengikuti rasio aspek 4:3 sehingga untuk menyesuaikan gambar slider 16:9, gambar tersebut akan meledak dan memotong kanan dan kiri gambar untuk menutupi seluruh ruang.

Tip Desain : Salah satu trik yang dapat Anda lakukan untuk mengurangi ukuran file dan menjaga agar thumbnail Anda tidak memotong sebagian gambar adalah dengan menyesuaikan thumbnail Anda menjadi 253×190 piksel (rasio aspek 4:3) dan pilih opsi untuk menyembunyikan menampilkan overlay gambar pada video utama. Dengan begitu gambar overlay Anda hanya akan digunakan untuk thumbnail dan oleh karena itu tidak perlu lebih besar untuk menyesuaikan ukuran video utama.

4 Tips Penting untuk Menghosting Sendiri Video Anda

1. Gunakan CDN. Jika Anda berpikir untuk menambahkan video Anda melalui Perpustakaan Media WordPress, pikirkan lagi. Meskipun dimungkinkan untuk meng-host video pada instalasi WordPress Anda sendiri di server Anda sendiri, Anda mungkin akan mengalami beberapa batasan pada bandwidth, ukuran file, ruang penyimpanan, dll... yang dapat menyebabkan waktu buka situs Anda terganggu dan mengakibatkan streaming video yang lambat. . Saya akan mempertimbangkan untuk menghosting video Anda di layanan eksternal seperti Amazons3. Ini akan membantu dengan waktu pemuatan halaman. Plus, beberapa penyedia ini menawarkan tingkat keamanan untuk mencegah orang mengunduh video Anda (atau setidaknya mempersulit pengunduhan).
2. Optimalkan File untuk Web. Video memakan banyak bandwidth, terutama saat Anda menggunakan latar belakang video yang besar. Anda harus berhati-hati untuk tidak membebani halaman Anda. Ada sejumlah faktor yang perlu dipertimbangkan jika Anda ingin mengoptimalkan video Anda dengan benar untuk web. Berikut adalah persamaan yang berguna untuk dipertimbangkan:
   ukuran file = bitrate (kilobit per detik) x durasi (panjang video dalam detik)

   Jadi, jika ingin mendapatkan ukuran file yang lebih kecil, Anda perlu mengurangi durasi (panjang video) dan/atau bitrate (jumlah kilobit per detik yang ditransmisikan). Bitrate harus selalu lebih rendah dari kecepatan koneksi pengguna. Mengingat kecepatan internet di seluruh dunia adalah sekitar 7 Mbps (AS sekitar 18 Mbps), Anda harus menjaga bitrate jauh di bawah itu untuk menghindari gangguan dalam streaming.

   Anda tidak harus melakukan ini semua sendiri. Ada beberapa alat gratis yang hebat di luar sana untuk membantu Anda dengan kompresi video seperti Handbrake.

   Saya sarankan membaca “5 Cara Terbaik untuk Mengurangi Ukuran Video untuk Pemuatan Lebih Cepat” jika Anda ingin mempelajari lebih lanjut tentang mengoptimalkan video Anda untuk web. Ada beberapa sumber daya yang terdaftar dan penjelasan yang bagus tentang cara menggunakan Handbrake.

3. Tambahkan Format File yang Benar.
   Seperti yang saya sebutkan sebelumnya, jika Anda meng-hosting sendiri video Anda (tidak bergantung pada pihak ketiga untuk meng-host-nya untuk Anda seperti Youtube), Anda perlu menambahkan video Anda dalam format mp4 dan webm.

   Mp4 saat ini merupakan format yang paling banyak didukung karena masih memainkan beberapa browser lama menggunakan flash dan merupakan standar untuk dukungan browser seluler. Divi mencantumkan mp4 terlebih dahulu dalam kode sehingga perangkat iOS dapat segera mengenali file tersebut.

   Webm adalah format kedua yang paling didukung. Itu dibuat untuk web dan tampaknya akan tetap ada di sini. Ini menghasilkan streaming berkualitas tinggi dengan kompresi yang sangat baik. Dan itu adalah sumber terbuka.

   Gabungan, keduanya menawarkan dukungan untuk sebagian besar browser web termasuk seluler.

   Alat konversi gratis yang hebat adalah pemutar media VLC.

4. Tentukan Jenis MIME: Agar format video WEBM berfungsi di semua browser, server Anda harus menetapkan jenis MIME yang benar. Anda dapat mempelajari lebih lanjut tentang menggunakan .htaccess untuk menentukan tipe MIME di sini. Jika Anda melihat video Anda tidak diputar di browser tertentu, mungkin inilah alasannya. Untuk menambahkan tipe MIME ke file .htaccess Anda, gunakan klien FTP (seperti FileZilla) untuk mengakses file root WordPress Anda. Di sana Anda harus menemukan file .htaccess Anda. Buka file di editor teks. Di bawah baris yang mengatakan "#END WordPress" tambahkan yang berikut:

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

   

   Kemudian simpan filenya. Sekarang format video Anda akan dikenali di semua browser.

Hosting dengan Platform Pihak Ketiga (Youtube dan Vimeo)

Jika Anda menemukan bahwa mengonversi dan mengompresi video Anda sendiri terlalu banyak pekerjaan, Anda selalu dapat membiarkan pihak ketiga melakukan pekerjaan untuk Anda.

Jika Anda tidak tahu apa-apa tentang video, saya sarankan mengambil rute ini. Jika Anda tidak tergila-gila dengan keterbatasan youtube atau vimeo gratis, Anda dapat menggigit peluru untuk Vimeo Pro. Mungkin sepadan dengan sakit kepala dalam jangka panjang. Yang tidak Anda inginkan adalah menempatkan video di situs Anda yang memperlambatnya atau terlihat buruk. Ini tidak layak.

Platform Video Pihak Ketiga yang didukung oleh Modul Video dan Slider Video

Jika Anda ingin menggunakan Modul Video dan Slider Video untuk menambahkan video pihak ketiga, Anda dapat menggunakan platform populer berikut:

• Youtube
• Vimeo
• Gerakan harian

Cara Menambahkan Video Pihak Ketiga Menggunakan Divi

Untuk menambahkan video dari salah satu platform ini, Anda harus membuka situs mereka untuk mendapatkan tautan berbagi.

Kemudian Anda dapat menempelkannya ke Modul Video atau Video Slider.

Klik tombol "Hasilkan dari Video" untuk menambahkan hamparan gambar. Atau unggah salah satu milik Anda.

Simpan Pengaturan. Dan itu saja.

Ingatlah bahwa Divi dibangun di WordPress sehingga Anda selalu dapat menyematkan video dari platform pihak ketiga menggunakan kode semat yang disarankan tanpa menggunakan Modul Video. Cukup tambahkan modul teks dan masukkan kode embed di dalam kotak konten.

Anda mungkin perlu menyesuaikan lebar dan tinggi untuk penyematan Anda untuk menyesuaikan tata letak yang responsif.

Bagaimana dengan Wistia?

Wistia adalah platform kuat yang digunakan banyak orang, tetapi sayangnya saat ini tidak berfungsi dengan baik dengan modul Divi. Namun, Anda dapat menyematkan Wistia menggunakan kode sematan yang mereka berikan.

Menempelkan kode itu di bagian konten di situs Divi Anda akan menampilkan video.

Anda bahkan dapat menempelkan kode ke bagian konten modul penggeser untuk menambahkan video wistia sebagai salah satu slide Anda. Namun, Anda perlu menyesuaikan beberapa CSS agar terlihat seperti yang Anda inginkan.

Menggunakan Latar Belakang Video dengan Divi

Haruskah Anda Menggunakan Latar Belakang Video?

Sebelum kita masuk ke detail latar belakang video, penting bagi Anda untuk bertanya pada diri sendiri dengan jujur ​​apakah Anda harus menggunakannya atau tidak. Jangan salah paham, saya suka latar belakang video yang bagus. Tapi terkadang itu tidak masuk akal. Jangan salah, video akan memperlambat situs Anda dan dapat mengganggu konten Anda. Jadi, jangan pernah memilih latar belakang video daripada gambar yang lebih efektif. Situs Anda mungkin lebih baik tanpanya.

Tapi, ada kalanya video adalah solusi yang lebih baik daripada gambar. Jika dilakukan dengan benar, latar belakang video dapat menghidupkan konten Anda. Jadi, buat video Anda memiliki tujuan dan jadikan itu berarti.

Kemampuan Latar Belakang Video dalam Divi

Anda dapat menambahkan latar belakang video hampir di mana saja Anda inginkan menggunakan Divi Builder. Anda dapat menambahkan latar belakang video ke setiap Bagian, Baris, dan Kolom. Anda bahkan dapat menambahkan latar belakang video ke sebagian besar modul.
Berikut adalah modul yang mendukung latar belakang video.

• Fullwidth Header (berfungsi pada opsi layar penuh juga)
• Menu Lebar Penuh
• Portofolio Lebar Penuh
• Slider Posting Lebar Penuh (Saat tidak menggunakan gambar unggulan, Anda dapat menggunakan latar belakang video untuk dijadikan latar belakang semua slide)
• Judul Posting Lebar Penuh
• Slider Lebar Penuh (berfungsi dengan slide individual)
• Modul audio
• Penghitung Bar
• Modul Blurb – pastikan untuk memberi modul beberapa bantalan.
• Modul ajakan bertindak
• Penghitung Waktu Mundur
• Pilihan Email
• Portofolio yang dapat difilter
• Modul Masuk
• Modul Penghitung Angka
• Modul Orang
• Pengaturan Portofolio
• Post Slider (Bila tidak menggunakan gambar unggulan, Anda dapat menggunakan latar belakang video sebagai latar belakang untuk semua slide)
• Judul Posting
• Tabel harga (Anda dapat mengatur latar belakang video untuk modul dan tabel yang berbeda satu per satu)
• Slider (hanya untuk latar belakang slide individual)
• Tab (untuk latar belakang modul dan tab individual)
• Kesaksian
• Teks
• Beralih

Perpustakaan Video Stok

Bagian tersulit tentang menambahkan latar belakang video ke situs Anda adalah menemukan gambar yang tepat dan memastikan ukurannya tepat. Untungnya, Anda tidak perlu membuat latar belakang video kustom Anda sendiri. Ada perpustakaan video stok bebas royalti yang tersedia yang mungkin berfungsi dengan baik untuk situs web Anda. Jika Anda mencari beberapa cuplikan video gratis, beberapa tempat yang bagus untuk memulai adalah videvo, coverr, atau videezy. Jika Anda mencari versi berbayar dengan kualitas yang lebih baik, Anda dapat melihat videohive, videoblocks, atau pond5. Beberapa situs ini menggunakan latar belakang video dengan sangat baik jika Anda mencari inspirasi.

Cara Menambahkan Latar Belakang Video ke Halaman Anda

Setelah Anda menemukan (atau membuat) video yang tepat, semuanya menjadi sangat mudah. Untuk menambahkan latar belakang video ke halaman web Divi Anda, cukup gunakan pembuat visual dan temukan bagian tempat Anda ingin menambahkan video dan klik ikon Pengaturan Bagian.

Di bawah tab konten, klik ikon/tab gambar latar di bawah opsi Latar Belakang. Jika Anda memiliki video yang dihosting sendiri, masukkan format mp4 dan webm. Kemudian masukkan dimensi video agar Divi tahu cara mengukurnya dengan benar.

Sekarang buka tab gambar latar belakang dan tambahkan gambar latar belakang yang akan berfungsi sebagai pengganti yang baik untuk perangkat seluler.

Kemudian simpan pengaturan. Sesederhana itu.

Jika Anda berencana menggunakan salah satu video Anda yang sekarang Anda host di youtube (atau vimeo) sebagai latar belakang, saat ini hal ini tidak mungkin dilakukan dalam pembuat Divi. Ingatlah bahwa Anda memerlukan video ini dalam format yang benar untuk ditampilkan di semua browser. Namun, Anda dapat mengunduh video Youtube itu (jika itu milik Anda) dan mengonversinya ke format mp4 dan webm untuk digunakan di latar belakang Anda.

Tip Desain Latar Belakang: Menggunakan Latar Belakang Video untuk Slider Posting Lebar Penuh Anda

Jika Anda mencari cara kreatif untuk menampilkan posting unggulan Anda di halaman blog Anda, Anda dapat menambahkan latar belakang video ke slider posting Anda. Mari saya tunjukkan apa yang saya maksud.

Buka halaman Anda menggunakan Visual Builder dan tambahkan Bagian Lebar Penuh ke bagian atas halaman dengan modul penggeser posting lebar penuh.

Di bawah tab Konten, di bawah Tampilkan Gambar Unggulan, pilih "TIDAK".

Kemudian di bawah bagian Latar Belakang, pilih tab latar belakang video dan tambahkan kedua format video Anda, beserta dimensinya.

Sebaiknya tambahkan juga gambar latar belakang sebagai cadangan untuk perangkat seluler yang tidak dapat menampilkan latar belakang video.

Itu dia.

Sekarang pengguna dapat menggulir melalui slider posting unggulan Anda dengan video latar belakang yang keren. Pastikan latar belakang video cukup halus untuk tidak mengalihkan perhatian dari konten.

Praktik Terbaik untuk Latar Belakang Video

Dengan semua kemungkinan yang diberikan oleh latar belakang video, saya pikir yang terbaik adalah menyertakan beberapa praktik terbaik umum.

1. Selalu sertakan gambar latar belakang sebagai cadangan untuk seluler. Perangkat seluler tidak akan memutar video besar secara otomatis. Inilah sebabnya mengapa Divi menampilkan gambar mundur secara default di perangkat seluler.
2. Gunakan video kecil. Untuk video latar belakang, Anda dapat menggunakan resolusi 720p karena latar belakang adalah pertimbangan kedua untuk konten/teks yang menutupi video. Kualitasnya tidak akan terlalu menurun sehingga Anda akan menyadarinya.
3. Pertimbangkan overlay. Menambahkan overlay warna semi-transparan di atas video akan membantu Anda mendapatkan ukuran file yang lebih kecil karena akan menyembunyikan detail video yang berantakan dengan kualitas yang lebih rendah. Plus itu akan membuat teks Anda lebih menonjol.
4. Jangan gunakan audio. Anda tidak memerlukan suara untuk latar belakang video, jadi keluarkan. Ini akan mengurangi ukuran file.
5. Gunakan format mp4 dan webm untuk dukungan lintas browser.

Jeda Video?

Anda mungkin telah melihat opsi ini tercantum dalam pengaturan di bawah opsi latar belakang.

Dalam beberapa kasus, video mungkin bertentangan dengan suara pemutaran latar belakang video lainnya. Opsi ini membantu agar hanya satu suara video yang diputar dalam satu waktu.

Peretasan Video Divi

Ada beberapa penyesuaian latar belakang video dan video lanjutan yang mungkin berguna bagi Anda. Berikut adalah beberapa.

Ubah ukuran Tombol Putar Anda

Jika Anda ingin mengubah ukuran tombol putar, buka pengaturan Modul Video, di bawah tab Lanjutan, dan masukkan CSS khusus berikut di kotak berlabel "Ikon Video":

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

Anda dapat menyesuaikan nilai dengan ukuran yang Anda inginkan. Pastikan bahwa ukuran font dan tinggi garis selalu tetap sama dan margin-top dan margin-bottom selalu tetap bernilai negatif yaitu setengah dari ukuran font. Misalnya, jika Anda ingin membuatnya lebih kecil, nilainya adalah.

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

Cara Menghentikan Latar Belakang Video dari Jeda Saat Klik

Dalam beberapa kasus, Anda mungkin mendapati bahwa mengeklik latar belakang video akan menjeda video. Anda dapat menonaktifkan fitur ini dengan menambahkan CSS Kustom berikut ke file style.css Anda di tema anak Anda (atau di penyesuai tema > CSS tambahan):

.et_pb_section_video_bg video {
pointer-events: none;
}

Cara Menghentikan Latar Belakang Video dari Looping

Anda mungkin ingat tip ini dari salah satu posting lama kami. Secara default, latar belakang video akan terus berulang. Ini disengaja karena biasanya itulah yang Anda inginkan dari latar belakang video. Tetapi jika Anda hanya ingin menampilkan video latar belakang Anda sekali dan kemudian berhenti, Anda dapat menonaktifkan tindakan loop dengan masuk ke Divi > Opsi Tema > Integrasi dan masukkan yang berikut ini di:

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

Dimensi Video untuk Divi

Saya tidak ingin mengakhiri posting tanpa menyebutkan dimensi video. Tidak ada aturan tegas tentang dimensi apa yang digunakan mengingat semua video dan situs web berbeda. Video 720p (1280x720) mungkin terlihat bagus jika direntangkan pada layar 1920x1080 sementara yang lain akan terlihat mengerikan. Saat memutuskan dimensi atau resolusi video untuk situs Anda, Anda dapat mengikuti dimensi gambar untuk tata letak kolom dan modul Divi sebagai pedoman umum. Sederhananya, video Anda harus paling dekat dengan lebar kolom tempat duduknya tanpa turun. Jadi jika Anda memiliki kolom fullwidth yang memiliki lebar maksimal 1080px, maka Anda tidak perlu video dengan resolusi lebih besar dari 720p (1280×720). Namun, jika Anda menggunakan latar belakang video yang membentang di seluruh lebar browser Anda, Anda mungkin perlu naik ke 1080p (1920×1080) sehingga saat itu membentang di seluruh lebar browser di monitor yang lebih besar, itu tidak terlihat kasar.

Jika Anda akan mengandalkan profesional video pihak ketiga untuk menyiapkan video Anda untuk web, berikut adalah daftar resolusi video yang direkomendasikan untuk youtube.

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

Ini mengikuti rasio aspek 16:9 sehingga Anda tidak akan melihat bilah hitam di sisi video.

Vimeo juga memberikan panduan untuk video. Saya terutama menyukai posting Vimeo tentang dasar-dasar kompresi video.

Pikiran Akhir

Video akan terus menjadi bagian integral dari pengalaman online kami untuk waktu yang lama. Jadi, penting bagi Anda untuk mengetahui apa yang Anda lakukan saat menambahkan video ke situs web Anda. Jika Anda memutuskan untuk menggunakan video di situs web Anda, Divi membuat prosesnya sangat sederhana, menyediakan solusi lintas browser untuk video yang di-hosting sendiri dan solusi yang nyaman untuk penyematan pihak ketiga. Tapi Divi tidak bisa melakukan segalanya untukmu. Semoga postingan ini dapat membantu Anda dalam proses memilih video yang tepat dan mempersiapkannya untuk web.

Saya berharap untuk mendengar dari Anda di komentar.