Memasukkan Video ke dalam Komentar Blogger

Tabel Konten
  1. Pembaharuan 
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.

13 Komentar

  • Taufik Nurrohman

    Demo:
    [iframe]http://www.youtube.com/embed/-joKveiaabA[/iframe]

  • Unknown

    \o/ mantep bang

    [iframe]http://www.youtube.com/watch?v=mpB9QXA9Dz4[/iframe]

    harus pke http ya ?? barusan saya coba cuma pke www ngga muncul

  • Kang Kapuk

    @Mbah Qopet Lha ndi videomu Al ....?

  • Taufik Nurrohman

    Jangan memakai URL yang ada di address bar, tapi ambil yang ada di bagian share or embed this video:


    [iframe]http://www.youtube.com/embed/mpB9QXA9Dz4[/iframe]

  • Putra

    wihihihih :D
    ada juga too?? ajiiib ^_^

  • Unknown

    [iframe]http://www.youtube.com/embed/GRT64z5gf5A[/iframe]

  • Unknown

    Mangstab udah bisa :)

  • Unknown

    [iframe]http://www.youtube.com/embed/ZnEr5yGVgYQ[/iframe]

    • Unknown

      Hahaha..akhirnya berhasil juga.....

  • Unknown

    hihihih

    [iframe]http://www.youtube.com/embed/ZnEr5yGVgYQ[/iframe]

  • Unknown

    Untuk memasukkan tag terlarang lebih baik diutak-atik pada comment-content dari pada comment-holder dengan manipulasi replace....

    • Taufik Nurrohman

      comment-content itu ada di dalam atribut kelas, sedangkan comment-holder itu ada di dalam atribut ID. Tetap lebih disarankan untuk menerapkannya pada ID elemen dibandingkan kelas karena performanya lebih baik.

  • Unknown

    Dan untuk lebih mudah, aman, dan nyaman kode2 javascript lebih baik disimpan di:
    Tata Letak>>add widget>>JavaScript/HTML
    copas atau bikin code anda kosongkan baris judul, dari pada susah2 cari tag < / body >.

    Meskipun metoda2 tersebut jalan 22nya, akan tetapi lebih baik metoda menyisipkan code di tag body dllnya pencarian tag digunakan khusus untuk mengedit template aja.

    "Edit template" dan "menyisipkan code" javascript, jquery, atau kode apa pun namanya adalah 2 hal yg berbeda.

Komentar telah ditutup.