Membuat Video Youtube Menjadi Responsif Menggunakan CSS

Secara default, saat kita menyelipkan video youtube di postingan blog, ia akan menggunakan iframe. Entah itu disematkan (embed), atau menggunakan URL link video. Jadi, tidak seperti gambar (image), video Youtube dengan iframe, tidak langsung bisa menyesuaikan diri dengan device.

Untuk tampilan desktop, tidak ada masalah yang muncul. Video akan tampil baik. Tapi, saat dibuka menggunakan ponsel, atau device lain yang lebih kecil, maka video Youtube menjadi terpotong sebagian atau jika bisa terlihat semua, maka tampilannya akan menjadi wagu. Karena tinggi video tidak proporsional dengan lebar-nya. Ini terjadi juga di blog ini.

Lalu, bagaimana mengatasinya ?

Mudah. Kita harus membuat tampilan video Youtube ini menjadi responsive, bisa menyesuaikan diri dengan lebar device yang digunakan. Caranya?

Menggunakan Jquery

Ya, kita bisa menggunakan script Jquery untuk menampilkan video Youtube menjadi responsif. Selengkapnya tentang ini, bisa Anda baca di sini. Saya tidak akan menuliskan ulang. Mbak Igniel sudah menjelaskan dengan komplit.

Membuat Video Youtube Menjadi Responsif Menggunakan CSS

Yang kedua menggunakan CSS. Saya menggunakan ini. Kenapa? Karena saya pernah menggunakan script di atas, tapi tidak berhasil. Saya tidak tahu mengapa. Mungkin karena theme yang saya pakai ini tidak mendeklarasikan kode script itu. Karena saya pernah mencoba dengan theme lain, bisa.

Setelah berputar-putar mencari, akhirnya saya menemukan blog ini, dan menerapkan cara ini di blog saya dan berhasil. Video Youtube saya menjadi responsive.

Kalau Anda ingin membuatnya juga, berikut baris kode CSS iframe untuk video Youtube,

iframe {aspect-ratio: 16 / 9;height: 100%;width: 100%;}

Ya. Hanya itu.

Bagaimana cara menambahkannya di blog?

  • Copy kode CSS di atas
  • Buka Tampilan >> Sesuaikan >> CSS Tambahan
  • Paste di sana.
  • Simpan

Silahkan cek. Seharusnya video Youtube sudah tampil responsif. Kalau Anda tidak sempat membuka ponsel, Anda bisa melihat responsifnya dengan menggunakan fitur Inspect Element dari Chrome.

Tentang Artikel Lama di Blog Ini

Ini semacam disclaimer tentang artikel lama di blog ini. Jadi, kalau Anda kebetulan kesasar di sini dan membaca artikel lama, dan kebetulan tidak sesuai lagi, jangan langsung nge-gas ya? Sengaja saya membiarkan artikel itu apa adanya. Kenapa?

Sekali lagi, blog ini adalah tempat saya menulis saat sempat, dan juga meng-arsipkan tulisan-tulisan lama saya. Sebagai sebuah gudang. Jadi, saya akan melakukan publikasi ulang apa adanya sesuai tanggal dan tahun. Jadi, saya mohon Anda melihat tanggal artikel dibuat sebelum nge-gasss… 😀

Kenapa tidak diupdate?

Saya ingin itu menjadi pengingat. Bahwa saya pernah menuliskan hal-hal yang baik, lucu, aneh, dan sok-sok an.

Cara Mudah Memindahkan Artikel dari WordPress ke Blogger

Ada banyak penyebab kenapa memindahkan artikel dari WordPress ke Blogger. Saya tidak bisa memastikan apa yang menjadi alasan itu. Kalau dilihat dari performa blog, WP masih unggul dibanding Blogger. Namun, WP memang membutuhkan sedikit biaya. Ini saya bicara soal WordPress self hosted. Bukan wordpress.com

Biaya di sini adalah untuk sewa hosting. Blogger tentu saja gratis. Apapun alasannya, langsung saja kita bahas bagaimana cara mudah memindahkan artikel dari WordPress ke Blogger.

Sebelumnya, kita bisa menggunakan aplikasi online untuk melakukannya. Kenapa? Karena jenis file artikel WordPress berbeda dengan Blogger. Jadi, kita butuh converter. Yaitu mengubah file XML WordPress ke Blogger. Aplikasi online seperti WordPress2Blogger Conversion sering gagal memprosesnya. Berujung ke error. Walaupun kita sudah membagi file WXR menggunakan WXR Splitter, namun masih sering error.

Tapi, Anda jangan khawatir. Sekarang ada plugin WP yang memudahkan kita melakukannya. Namanya Export to Blogger. Bagaimana melakukannya? Kita bahas yuk …

Cara Mudah Memindahkan Artikel dari WordPress ke Blogger

Langkah Pertama

  • Login ke blog Wordrpess –> Plugin
  • Klik “Tambah Baru”
  • Di form pencarian tuliskan Export to Blogger

  • Install Plugin dan aktifkan
  • Klik “Pengaturan –> Export to Blogger”
  • Pilih kategori yang akan diekspor. Untuk “Convert to Blogger label”, lebih baik memilih Categories saja. Sebab bila Tags juga ikut dicentang, maka akan muncul semua Tags yang ada di Kategori blog WordPress menjadi label. Tapi kalau Anda ingin memunculkannya, boleh saja.

  • Klik tombol Export XML. File akan terdownload. Catatan : bila Anda sudah memiliki banyak artikel dan dengan banyak kategori, lebih baik lakukan ekspor per kategori. Ini akan lebih cepat.
  • Jangan lupa, simpan ditempat yang mudah diingat file XML ini.

Langkah Kedua

  • Login ke blog di Blogger.
  • Klik “Setelan”, kemudian scroll ke bawah dan temukan “Kelola Blog”

  • Klik “Impor konten”, akan muncul pop up window, lalu pilih file hasil download tadi di komputer atau laptop kita, lalu klik “Open”
  • Proses Impor akan segera dijalankan. Ditunggu saja. Artikel tidak akan langsung terlihat. Jadi butuh kesabaran.

Cobalah refresh halaman. Seharusnya artikel kita sudah terimport.

Itu dia cara mudah memindahkan artikel dari WordPress ke Blogger.