Cara Menyisipkan Video di WordPress

Diterbitkan: 2020-11-27

Membuat konten yang menarik dan menarik adalah kunci untuk membuat pengunjung Anda terjebak di dalamnya dan ingin tahu lebih banyak tentang Anda dan produk Anda. Sebelumnya, saya sudah menyebutkan beberapa trik untuk membuat halaman yang membuat Anda jatuh cinta dan saya secara eksplisit menyebutkan pentingnya memasukkan elemen visual.

Padahal, tahun lalu, sebuah studi oleh Zenith memperkirakan pada tahun 2021 akan terjadi peningkatan penayangan video hingga 100 menit per hari dan peningkatan belanja iklan video sebesar 35%. Menurut Cisco, pada tahun 2022 80% dari semua lalu lintas Internet akan berada dalam format video. Dan saya khawatir semua prediksi ini gagal pada pandemi saat ini.

Penayangan video online global
Prediksi penayangan dan iklan video online global untuk tahun 2021.

Jadi, tanpa basa-basi lagi tentang pentingnya menambahkan video ke posting dan halaman situs web Anda, mari kita lihat betapa mudahnya menambahkan video di WordPress dan fitur baru apa yang disediakan oleh versi terbaru Gutenberg 9.2.2.

Salin URL Video

Kami beruntung bahwa editor WordPress memungkinkan Anda menyematkan video dari platform apa pun dengan sangat mudah. Di browser, dari platform tempat video berada, Anda dapat langsung menyalin URL-nya.

Tangkapan layar cara memilih URL video YouTube
Pilih dan salin URL video yang ingin Anda sematkan.

Anda juga dapat menyalin URL dengan mengeklik tombol Bagikan yang Anda temukan untuk membagikan video dan yang dengannya Anda dapat menambahkan opsi tambahan, seperti menunjukkan waktu mulai video.

Bagikan video YouTube
Bagikan video YouTube yang menunjukkan untuk memulai di menit 1.

Kemudian Anda hanya perlu menempelkannya langsung ke blok teks atau Anda juga memiliki opsi untuk memilih blok jenis video yang akan Anda masukkan sebelumnya. Jadi, misalnya saya ingin menyematkan video WordCamp US 2019 – State of the Word dari YouTube mulai saat Matt Mullenweg muncul, saya akan membuat blok YouTube baru dan memasukkan URL https://youtu.be/gS6_xOABTWo?t=2085 (atau sebagai alternatif url https://www.youtube.com/watch?v=gS6_xOABTWo&start=2085 ).

Menyematkan video YouTube.
Menyematkan video YouTube.

Perhatikan bahwa waktu harus ditunjukkan dalam detik. Selain itu, Anda juga memiliki opsi untuk menyelaraskan video sesuai keinginan di halaman Anda.

Sejajarkan video dari blok jenis YouTube.
Sejajarkan blok jenis video YouTube.

Dan Anda mendapatkan video tersemat baru di pos Anda:

Tetapi tidak hanya itu, ketika Anda menambahkan blok YouTube (atau jenis video lain), Anda juga memiliki opsi lain yang dapat Anda tambahkan ke tampilan video dan itu bergantung pada platform tempat video itu diputar.

Jadi, misalnya, dalam kasus YouTube, opsi yang tersedia (melalui parameter tambahan di URL) yang Anda miliki adalah:

  • Untuk menyematkan video dengan lebar dan tinggi default yang disesuaikan dengan tema: https://www.youtube.com/gS6_xOABTWo
  • Untuk menentukan lebar dan tinggi secara eksplisit: https://www.youtube.com/watch?v=gS6_xOABTWo?&w=320&h=240
  • Untuk menentukan lebar saja: https://www.youtube.com/watch?v=gS6_xOABTWo&w=320
  • Untuk menyelaraskan pemutar ke kiri: https://www.youtube.com/watch?v=gS6_xOABTWo&align=left
  • Untuk menyelaraskan pemutar ke kanan: https://www.youtube.com/watch?v=gS6_xOABTWo&align=right
  • Untuk hanya menampilkan video terkait dari saluran yang sama setelah menyelesaikan video: https://www.youtube.com/watch?v=gS6_xOABTWo&rel=0
  • Untuk menentukan waktu mulai dan berakhir video, tambahkan waktu mulai dan berakhir: https://www.youtube.com/watch?v=gS6_xOABTWo&start=75&end=500

Unggah Dan Lihat video Anda Di WordPress Anda

Terkadang Anda tidak ingin mengunggah video Anda sendiri ke platform pihak ketiga dan ingin memilikinya secara eksklusif di server WordPress Anda. Mengunggah video ke perpustakaan media Anda dan menambahkannya semudah mengunggah gambar lainnya. Klik Media atau tambahkan blok jenis Video:

Blok jenis video.
Blok jenis video.

Sama seperti saat Anda menambahkan gambar, Anda memiliki opsi untuk langsung mengunggah video, memilihnya dari perpustakaan media, atau menyisipkan URL-nya.

Schreenshot tentang cara menambahkan blok video di editor blok
Tambahkan video dari editor blok.

Kemudian, di perpustakaan media, kita hanya perlu memilih video yang ingin kita sisipkan dan kita akan menyediakannya di halaman atau postingan kita.

Tangkapan layar file video yang tersedia di perpustakaan Media WordPress
Semua video yang tersedia untuk disematkan akan ditampilkan di perpustakaan media.

Dan setelah dipilih, kami akan menyediakannya untuk semua pengunjung kami.

Juga, versi baru Gutenberg 9.2.2. menambahkan fungsionalitas baru ke penyisipan video. Secara khusus, ini memungkinkan Anda untuk menambahkan elemen HTML jenis <track> dari menu edit.

Pasti Anda pernah memperhatikan bahwa jika Anda telah mengunduh sebuah video, folder yang berisi video tersebut juga menyertakan file SRT . Ini adalah file subtitle yang tidak disertakan dalam video tetapi pemutar video dapat mengekstrak dan menampilkannya secara sinkron dengan video yang Anda tonton. Jadi elemen track berfungsi untuk menunjukkan lokasi dan beberapa fitur tambahan dari file SRT ini.

Saat memasukkan video, HTML yang dihasilkan mirip dengan:

 <!-- wp:video {"id":15850} --> <figure class="wp-block-video"> <video controls="" src="/my-site.com/.../my-video.mp4"></video></figure> <!-- /wp:video -->

Dengan Gutenberg versi baru ini, sekarang Anda dapat menambahkan elemen trek ke video dari menu edit tanpa pengeditan HTML sama sekali. Jadi, misalnya, Anda dapat menambahkan subtitle bahasa Inggris ke video dan kode HTML akan menyertakan trek dengan informasi subtitle.

 <video controls="" src="/my-site.com/.../my-video.mp4"> <track src="mi-sitio.com/.../english-captions.srt" label="English" srclang="en"> </video>

Atribut yang dapat ditunjukkan pada trek adalah sebagai berikut:

  • srclang – Bahasa data teks trek. Itu harus berupa kode tag bahasa BCP 47 yang valid.
  • label – Judul untuk antarmuka pemutar.
  • kind – Bagaimana teks trek digunakan. Itu dapat memiliki kata kunci berikut:
    • subtitle
      • Subtitle untuk terjemahan konten video (misalnya subtitle dalam bahasa Spanyol ketika video dalam bahasa Inggris) dirancang untuk orang yang tidak mengerti bahasa.
    • keterangan
      • Transkripsi dari apa yang didengar dalam video (dialog dan suara lainnya) yang ditujukan untuk orang dengan masalah pendengaran.
    • deskripsi
      • Deskripsi tekstual dari konten video yang ditujukan untuk orang yang buta atau tidak dapat melihat video.
    • bab
      • Judul bab dimaksudkan untuk digunakan saat pengguna menavigasi melalui sumber daya multimedia.
    • metadata
      • Trek yang digunakan oleh skrip. Tidak terlihat oleh pengguna.
  • src – URL dari file teks.

Bagaimana cara menambahkan trek ini? Sangat mudah, setelah menambahkan blok jenis video dan memilih video yang ingin kita tampilkan, muncul opsi baru di menu pengeditan video, yaitu Add Track s dengan opsi Open Media Library atau Upload .

Unggah atau pilih dari perpustakaan media file yang berisi teks trek.
Unggah atau pilih dari perpustakaan media file yang berisi teks trek.

Setelah mengunggah file ke perpustakaan media, Anda siap untuk memilihnya.

Tangkapan layar tentang cara memilih dari perpustakaan media WordPress trek yang berisi teks untuk disinkronkan dengan video
Pilih dari perpustakaan media trek berisi teks yang akan disinkronkan dengan video.

Anda akan melihat tampilannya di menu pengeditan video sehingga Anda dapat mengedit atribut trek:

Edit properti trek.
Setelah memilih file, Anda sekarang dapat mengedit properti trek.

Klik tombol Edit dan ubah atribut yang sesuai. Anda sekarang akan memiliki trek teks yang disertakan dalam video Anda yang disinkronkan dengan tampilan video.

Tangkapan layar tentang cara mengubah atribut trek video di Gutenberg
Ubah atribut trek sesuai keinginan Anda.

Dengan demikian, Anda tidak hanya dapat memiliki video Anda sendiri di perpustakaan media Anda, tetapi Anda juga dapat dengan mudah memasukkan informasi tambahan tentangnya.

Anda telah melihat bahwa menyertakan video yang telah Anda host di platform pihak ketiga sangatlah mudah hanya dengan menyalin URL tempat video tersebut berada. Tetapi jika, untuk alasan apa pun, Anda lebih suka video Anda dihosting di instalasi WordPress Anda sendiri, dengan versi terbaru Gutenberg ini Anda sekarang dapat menampilkan video Anda dengan cara yang nyaman.

Foto oleh CardMapr di Unsplash .