Menyediakan informasi seputar perkembangan mesin Blogger dan internet secara umum.

Memasukkan Video ke dalam Komentar Blogger

YouTube Video

Sekedar melengkapi posting ini: Memanfaatkan jQuery untuk Mengizinkan Elemen Terlarang Masuk ke dalam Kometar Blogger, Saya menggunakan elemen <a> untuk menyisipkan video ke dalam komentar Blogger. Dengan begitu Anda tidak perlu khawatir terhadap masalah fallback yang buruk jika JavaScript dimatikan.

Saat JavaScript pada peramban diaktifkan, semua elemen tautan yang mengandung URL berpola youtube.com/embed akan berubah menjadi video, dan jika JavaScript dimatikan, maka video tidak akan tampil pada posting komentar namun masih tetap meninggalkan elemen aslinya yaitu <a>, sehingga saat tautan tersebut diklik, Anda akan dibawa menuju ke halaman video satu layar penuh:

<script>
//<![CDATA[
$('#comments p, #comments dd').each(function() {
  $(this).find('a[href*="youtube.com/embed"]').replaceWith(function() {
    return $('<iframe width="420" height="315" src="' + this.href + '"></iframe>');
  }); 
});
//]]>
</script>

Salin kode tersebut dan letakkan di atas </body> kemudian simpan semua perubahan.

Untuk menyisipkan video, caranya cukup dengan menyalin URL kode embed yang ada di dalam textarea (ambil URL-nya saja). Lalu kita gunakan URL tersebut sebagai pengisi atribut href pada tautan:

<a href="Letakkan URL video di sini">Video</a>
Memasukkan Video ke Dalam Komentar Blogger
Ambil URL pada elemen <iframe>

Atau jika Anda telah menciptakan sistem untuk menghapus tautan pada semua posting komentar (seperti Saya), Anda bisa menggunakan cara lama seperti ini:

[iframe]Letakkan URL video di sini[/iframe]

Berikut ini adalah kode manipulasinya:

<script>
//<![CDATA[
$('#comments p, #comments dd').each(function() {
    $(this).html(
        $(this).html()
            .replace(/\[iframe\](.*?)\[\/iframe\]/ig, "<iframe width='420' height='315' src='$1'></iframe>")
    );
});
//]]>
</script>

Dan sebagai tambahan lagi, karena ini adalah manipulasi <iframe>, maka Anda sebenarnya tidak harus membatasi diri dengan video. Apa saja yang bisa tampil pada elemen <iframe> bisa ditampilkan pada posting komentar Blogger dengan metode ini.


Pembaharuan

Ucapan terimakasih kepada Mbah Qopet atas petunjuknya mengenai kekurangan metode ke dua. Masalahnya adalah, jika URL video yang dituliskan tidak sesuai dengan apa yang kita kehendaki, akan ada beberapa hal buruk yang mungkin terjadi. Misalnya, akses halaman menjadi sangat lambat karena iframe telah mengakses URL yang salah. Belum lagi mengenai para komentator yang mungkin saja merupakan orang jahat sehingga mereka bisa saja menyisipkan URL berbahaya pada manipulasi ini. Untuk metode pertama relatif lebih aman karena di situ dengan jelas Saya telah membatasi format URL yaitu hanya untuk elemen <a> yang mengandung URL youtube.com/embed. Di luar syarat itu, tautan tidak akan diubah menjadi video.

Cara sederhana untuk membatasi URL pada metode ke dua adalah dengan mendeteksi apakah nilai atribut src pada iframe mengandung URL youtube.com/embed atau tidak. Jika tidak, hapus atribut src pada iframe tersebut sehingga hal-hal buruk yang mungkin terjadi karena kesalahan URL video YouTube bisa diatasi. Berikut ini adalah kode selengkapnya untuk menyisipkan video dengan metode ke dua:

<script>
//<![CDATA[
$('#comments p, #comments dd').each(function() {
    $(this).html(
        $(this).html()
            .replace(/\[iframe\](.*?)\[\/iframe\]/ig, "<iframe width='420' height='315' src='$1'></iframe>")
    );

    // Jika URL pada `iframe.video` tidak mengandung path `youtube.com/embed` ...
    // ... segera hapus atribut `src` pada elemen tersebut ...
    // ... lalu tambahkan latar belakang berupa gambar yang menyatakan peringatan kesalahan.
    $('iframe.video:not([src*="youtube.com/embed"])')
        .removeAttr('src')
            .css('background', '#900 url(error.png) no-repeat 50% 50%');
});
//]]>
</script>

Saya masih tetap menyarankan Anda untuk menggunakan metode pertama yang jauh lebih sederhana. Metode ke dua ini hanya sebagai alternatif saja untuk blog-blog dengan peraturan komentar yang tidak begitu bebas seperti di blog Saya.

  

Berlangganan

Berlangganan: Dapatkan berbagai materi dan informasi seputar dunia pemrograman yang tidak akan pernah bisa kalian dapatkan di buku dan di bangku kuliah.

 13 Komentar

Memuat…

Tautan (link) hidup dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan tautan dengan aman, gunakan kode [url=http://example.com]Teks Tautan[/url]
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA</i>
Untuk menyisipkan gambar, gunakan kode [img]URL GAMBAR[/img]
Untuk menyisipkan judul, gunakan tag <b rel="h4">JUDUL ANDA DI SINI…</b>
Untuk menciptakan efek tebal gunakan tag <strong>TEKS ANDA DI SINI…</strong>
Untuk menciptakan efek huruf miring gunakan tag <em>TEKS ANDA DI SINI…</em>

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.

:) :( ^_^ :D ;) :bd :'( :\ ;p B) :Q :Ozzz 7:( \o/ **p :* 0:) :a 7:O *fuck* x& x@ ~x( *yaya* =p*

Nama Saya Taufik Nurrohman. Sebenarnya Saya tidak bisa disebut sebagai seorang yang profesional dalam bidang ini, karena Saya tidak menguasai bidang ini melalui pendidikan formal. Saya hanyalah seorang antusias. Dibandingkan sebagai seorang desainer atau pengembang, Saya lebih suka jika disebut sebagai seorang hobiis saja yang tertarik dengan dunia web.

Daftar Tautan

Saya tidak bisa hidup tanpa JavaScript! Aktifkan JavaScript?
Ke atas!