Ingin mengetahui cara membuka video YouTube dalam popup di WordPress?

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 diaktifkan (periksa « Aktifkan 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 

Semua lightbox Anda dapat memiliki judul yang dapat ditampilkan (Tampilan judul). Terkadang untuk jendela modal besar Anda perlu mengizinkan pengubahan ukuran (mengizinkan mengubah ukuran). Dan untuk video yang lebih panjang, pengguna dapat memperbesarnya (mengizinkan Lihat lebih lanjut), 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 ").

buka video Youtube dalam popup - define-les-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] (pour YouTube)
[video_lightbox_vimeo5] (pour 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="640height="480anchor="Une simple vidéo" description="Par Dr WP"]

Untuk hasil yang serupa

presentasi-untuk-hasil

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

[video_lightbox_youtube video_id="YzqKMmQ_3Sg&rel=0width="640height="480auto_thumb="1description="Par Dr 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 yang lain plugin WordPress untuk memberikan tampilan yang modern dan untuk mengoptimalkan penanganan blog atau website Anda.

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

1. FileBird

FileBird

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

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 halaman atau menerbitkannya.

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 manajemen perpustakaan media Anda, WordPress Plugin FileBird 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

Cette Ekstensi WordPress dari plugin Contact Form 7 menghadirkan fungsionalitas tooltip yang mudah ke plugin Contact Form 7. Tooltipnya akan ditampilkan ketika elemen target diarahkan. Pada perangkat seluler, tooltips menunjukkan kapan elemen target diaktifkan.

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.

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 berbagi dengan teman-teman Anda di jejaring sosial favorit 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.

...