Home » , , , » Memasukkan Video ke dalam Komentar Blogger

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 dinonaktifkan.
Saat JavaScript pada browser diaktifkan, semua elemen link/tautan yang mengandung URL youtube.com/embed akan berubah menjadi video, dan jika JavaScript dinonaktifkan, video tidak akan tampil pada posting komentar namun masih tetap meninggalkan elemen aslinya yaitu <a>, sehingga saat tautan tersebut diklik, Anda akan dibawa pada halaman video satu layar penuh:


<script type='text/javascript'>
//<![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 + '" frameborder="0"></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 (cukup ambil URL-nya saja). Lalu kita gunakan URL tersebut sebagai nilai dari 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 kodenya:

<script type='text/javascript'>
//<![CDATA[
$('#comments p, #comments dd').each(function() {
$(this).html($(this).html()
.replace(/\[iframe\]/ig, "<iframe width='420' height='315' src='")
.replace(/\[\/iframe\]/ig, "' frameborder='0'></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, selain itu 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 type='text/javascript'>
//<![CDATA[
$('#comments p, #comments dd').each(function() {
$(this).html($(this).html()
.replace(/\[iframe\]/ig, "<iframe class='video' width='420' height='315' src='")
.replace(/\[\/iframe\]/ig, "' frameborder='0'></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(http://hompimpa.googlecode.com/svn/trunk/personal/images/iframe-fallback.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.

0 komentar:

Posting Komentar