Loncat ke Konten Utama

Cara Buka video Youtube dalam popup di Wordpress

Divi: tema WordPress termudah untuk digunakan

Divi: Tema WordPress terbaik sepanjang masa!

lebih 701.000 unduhan, Divi adalah tema WordPress paling populer di dunia. Sudah lengkap, mudah digunakan dan dilengkapi dengan lebih dari 62 template gratis. [Direkomendasikan]

La kotak lampu atau modal window (pop up) adalah fitur yang sangat umum di internet. Namun, umumnya digunakan untuk menampilkan gambar, formulir pengambilan email, promosi atau bahkan formulir pendaftaran. 

Tapi tahukah Anda bahwa itu juga memungkinkan untuk menggunakannya untuk menampilkan video WordPress ? Tidak 

Jangan khawatir, dalam tutorial ini saya akan menunjukkan cara menampilkan video (Youtube - Vimeo - dll) dalam kotak lampu.

Tetapi sebelumnya, jika Anda belum pernah menginstal WordPress temukan Bagaimana menginstal sebuah blog WordPress langkah 7 et Bagaimana menemukan, menginstal dan mengaktifkan tema WordPress di blog Anda 

Lalu kembali ke mengapa kita ada di sini.

Alasan mengapa Anda harus menggunakan a lightbox untuk menampilkan video Anda 

itu kotak lampu adalah jendela modal, namun, yang tidak Anda ketahui adalah bahwa tidak semua gambar yang ditampilkan di dalamnya dimuat selama proses « pemuatan«  Halaman. 

Le navigator biaya les gambar kapan kotak lampu terbuka, ini juga kasus untuk video. Singkatnya, itu adalah fitur itu akan memungkinkan halaman Anda terbuka lebih cepat. Ini juga akan memungkinkan Anda untuk mengurangi ukurannya (panjangnya) Of halaman Andakarena bagian dari konten halaman ini akan tersedia di jendela modal ini.

Gencatan senjata obrolan, mari kita turun ke bisnis.

Cara menginstal dan mengkonfigurasi Plugin WP Video Lightbox

WP Video Lightbox adalah a Plugin tersedia di WordPress.org. Artinya, Anda dapat menginstalnya langsung dari dasbor WordPress Anda, atau unduh itu sebagai file .zip.

Untuk lebih jelasnya, lihat panduan langkah demi langkah kami tentang cara memasang plugin WordPress.

Setelah mengaktifkan Plugin, buka halaman pengaturannya dari lokasi ini " pengaturan >> Video kotak lampu '.

Kami akan langsung pergi ke " prettyPhoto '.

Pada kenyataannya, ini Plugin gunakan yang lain Plugin, yang dimaksudkan terutama untuk menampilkan galeri foto. Tetapi Anda dapat mengubah beberapa informasi yang akan diterapkan pada video.

Untuk itu, saya akan menjelaskan beberapa opsi (Diperlukan)Sehingga seperti yang Anda inginkan.

Sudah toko buku prettyPhoto harus aktif (periksa « memungkinkan prettyPhoto »)Untuk memberi tahu pengguna bahwa mereka berada di halaman yang sama, Anda dapat membuat jendela transparan (menetapkan nilai dari 0 ke 1. Nilai koma diterima).

Temukan Karakteristik dari popup yang efektif untuk WordPress 

Buat situs web Anda dengan Elementor dengan mudah

Elementor memungkinkan Anda untuk dengan mudah membuat desain situs web apa pun dengan tampilan profesional. Berhentilah membayar mahal untuk apa yang dapat Anda lakukan sendiri. [Gratis]

Semua lightbox Anda dapat memiliki judul yang dapat ditampilkan (Menunjukkan judul). Terkadang untuk jendela modal besar Anda perlu mengizinkan pengubahan ukuran (mengizinkan mengubah ukuran). Dan untuk video yang lebih panjang, pengguna dapat memperbesarnya (mengizinkan Memperluas), untuk lebih melihat mereka.

Untuk lebar dan tinggi kotak lampu, Anda dapat mengedit kolom " kegagalan lebar "Dan" kegagalan tinggi '. 

Untuk memilih tema kotak lampu, ubah menu tarik-turun tema ". Dimungkinkan juga untuk mengaktifkan putar otomatis (centang kotak " Autoplay ").

mendefinisikan-the-regalges

Cara menampilkan kotak lampu dalam sebuah artikel

Le Plugin mengusulkan daftar shortcode yang akan memungkinkan Anda untuk menampilkan kotak lampu dalam artikel. Saya lupa memberi tahu Anda bahwa Anda juga dapat melihat video yang tersedia di Vimeo.

Untuk melihat video Youtube ou VimeoAnda harus menggunakan shortcode berikut:

[video_lightbox_youtube] (untuk YouTube)
[video_lightbox_vimeo5] (Untuk Vimeo)

Masing-masing ini shortcode menerima parameter, yang akan memungkinkan Anda untuk:

  • Tentukan pengenalnya (video_id) video, biasanya dalam format ini " YzqKMmQ_3Sg '. Exemple [video_lightbox_youtub video_id = "YzqKMmQ_3Sg"]
  • Atur ketinggian video (tinggi)
  • Atur lebar video (lebar)
  • Tambahkan deskripsi (deskripsi)
  • Tambahkan jangkar HTML (jangkar), atau teks tautan yang akan membuka jendela
  • Tambahkan thumbnail (auto_thumb)

Jika Anda mengatur jangkar HTML, gambar mini akan diabaikan. Kalau tidak, auto_thumb mengambil nilai " 1 '.

Pergi lebih jauh dengan menemukan juga Cara menggunakan dan mengelola shortcode WordPress

Demo penggunaan

Dengan apa yang baru saja saya berikan kepada Anda, Anda dapat menampilkan video menggunakan kode yang mirip dengan ini:

[video_lightbox_youtube video_id = "YzqKMmQ_3Sg & rel = 0width = "640tinggi = "480anchor = "One video sederhana " description = "Oleh WP "]

Untuk hasil yang serupa

presentasi-untuk-hasil

Apakah Anda mencari tema dan plugin WordPress terbaik?

Unduh plugin terbaik dan tema WordPress di Envato dan buat situs web Anda dengan mudah. Sudah lebih dari 49.720.000 unduhan. [EKSKLUSIF]

Anda dapat melihat thumbnail seperti yang ditunjukkan di atas dengan kode yang mirip dengan ini.

[video_lightbox_youtube video_id = "YzqKMmQ_3Sg & rel = 0width = "640tinggi = "480auto_thumb = "1description = "Oleh WP "]

Untuk hasil yang identik dengan yang ini

miniatur-gundukan-video

sebelum meninggalkan

Perlu dicatat bahwa beberapa parameter dalam shortcode akan menimpa yang ditentukan dalam pengaturan.

Temukan juga beberapa plugin WordPress premium  

Anda dapat menggunakan plugin WordPress lainnya untuk memberikan tampilan modern dan mengoptimalkan cengkeraman blog atau situs web Anda.

Kami menawarkan kepada Anda beberapa plugin WordPress premium yang akan membantu Anda melakukannya.

1. FileBird

Pernahkah Anda kesulitan mengelola ribuan file gambar, video, atau dokumen yang Anda unggah ke FTP WordPress? ya atau tidak, apapun, yang terpenting adalah mengetahui bahwa plugin WordPress FileBird akan membantu Anda mengelola file media dengan mudah dan memberikan lebih banyak kekuatan ke perpustakaan Anda.FileBird

Antarmuka pengguna yang mulus dan menu konteks memungkinkan pengguna untuk menyeret dan meletakkan file ke folder atau memiliki hak yang diperlukan untuk dengan cepat membuat, mengganti nama atau menghapus folder dengan cara yang sama seperti yang Anda lakukan pada komputer Anda. Dengan plugin ini di tangan, file media Anda akan diatur secara sistematis dan Anda dapat dengan mudah memilih gambar untuk dimasukkan ke dalam halaman atau menerbitkannya di sana.

Temukan juga milik kami Plugin 6 WordPress untuk memberikan kehidupan baru ke dalam artikel Anda

Selain itu, plugin ini sepenuhnya kompatibel dengan plugin yang paling populer, terutama dengan WooCommerce, dan juga mendukung sejumlah besar bahasa. Jadi, jika Anda ingin meningkatkan pengelolaan perpustakaan media Anda, plugin FileBird WordPress bisa menjadi senjata rahasia Anda.

DownloadDemo Hébergement Web

2. Berbagi Sosial & Locker Pro

Ekstensi Social Share & Locker Pro telah dirancang untuk membantu situs web Anda lebih terlihat di jejaring sosial. Hanya dengan beberapa klik, Anda dapat mengatur posisi ikon sosial Anda atau mengunci konten Anda dengan meminta berbagi di salah satu jejaring sosial yang Anda tawarkan.

Plugin Social Share Locker Pro WordPress

Anda memiliki 10 templat yang harus mencakup keinginan paling umum. Semua modelnya sempurna dan bekerja dengan sangat baik. Selain itu, dengan Social Share & Locker Pro, Anda akan dapat menampilkan nama lengkap jejaring sosial atau hanya ikonnya. Itu akan tergantung pada desain Anda, ruang yang tersedia, atau selera Anda.

Download | Demo | Hébergement Web

3. Formulir Kontak 7 Tooltips

Ekstensi WordPress dari plugin Contact Form 7 ini menghadirkan fitur menambahkan tooltips dengan mudah ke plugin Contact Form 7. Tooltipsnya akan ditampilkan ketika elemen target di-hover. Di perangkat seluler, keterangan alat menunjukkan saat item target digunakan.Formulir Kontak 7 Tooltips

Fitur utamanya adalah: kemudahan penggunaan, dukungan untuk semua versi Formulir Kontak 7, penyesuaian warna latar tooltip, dukungan untuk kode HTML, tata letak lengkap responsif, dan banyak lagi.

Buat Toko Online Anda dengan mudah

Unduh WooCommerce gratis, plugin e-commerce terbaik untuk menjual produk fisik dan digital Anda di WordPress. [Rekomendasi]

Download | Demo | Hébergement Web

Sumber daya lain yang direkomendasikan

Kami juga mengundang Anda untuk berkonsultasi dengan sumber daya di bawah ini untuk melangkah lebih jauh dalam cengkeraman dan kontrol situs web dan blog Anda.

Kesimpulan

Here! Sekian tutorial kali ini, semoga membantu Anda untuk menampilkan video Youtube atau Vimeo dalam format lightbox di situs WordPress Anda. merasa bebas untuk bagikan tip dengan teman-teman Anda di jejaring sosial Anda.

Namun, Anda juga akan dapat berkonsultasi dengan kami ressources, jika Anda memerlukan lebih banyak elemen untuk melaksanakan proyek pembuatan situs Internet Anda, dengan membaca panduan kami di Pembuatan blog WordPress.

Namun, sementara itu, beri tahu kami tentang file komentar dan saran di bagian khusus.

...

Artikel ini berisi komentar 7

  1. Halo,
    Saya mencari cara untuk menampilkan video popup setelah mengklik tombol. Mungkinkah melakukannya dengan WP Video Lightbox?

    Merci,
    Hormat kami,

  2. Halo,
    Terima kasih banyak untuk tutorial yang dibangun dengan baik ini, saya ingin tahu apakah mungkin untuk menambahkan video dari platform lain selain You Tube dan Vimeo (contoh Openload) atau apakah akan ada batasan.

    milikmu

Tinggalkan komentar

Alamat email Anda tidak akan dipublikasikan. Bidang yang harus diisi ditandai *

Situs ini menggunakan Akismet untuk mengurangi yang tidak diinginkan. Pelajari lebih lanjut tentang bagaimana data komentar Anda digunakan.

Kembali ke atas
7 saham
saham5
menciak
Register2