Mengubah URL YouTube menjadi Video
$('p').html(function(i, html) {
var re = /(?:http:\/\/)?(?:www\.)?(?:youtube\.com|youtu\.be)\/(?:watch\?v=)?(.+)/g,
vid = '<iframe width="420" height="345" src="//www.youtube.com/embed/$1" allowfullscreen></iframe>';
return html.replace(re, vid);
});Lolos untuk dua bentuk URL YouTube seperti ini:
http://youtu.be/-joKveiaabAhttp://www.youtube.com/watch?v=-joKveiaabASumber: How to Convert a YouTube Video URL to the Iframe Embed Code, using jQuery
25 Comments:
mancap...
rajin mosting euy, ada murid yg suka bertanya-tanya yah...qiqiqiqi
si sistem :p
By
Beben Koben, at Monday, April 23, 2012 at 6:42:00 PM GMT+7
haaaaa, wow. nggumun (kagum beuud) akuu ^_^
kreatiiiifffppp beuud yo mas \o/ \o/ \o/ \o/
By
Putra, at Monday, April 23, 2012 at 7:26:00 PM GMT+7
@Beben Koben Wkwkwkwkkkk... kok murid sih? @@, Jadi nggak enak sama mas Zhintho. Kita ini orangnya sama-sama suka tanya-tanya kok. Cuma bedanya, dia tanya secara langsung, Saya tanya secara tidak langsung. Tanyanya sama benda mati: Internet! <3 :D
By
Taufik Nurrohman, at Monday, April 23, 2012 at 7:27:00 PM GMT+7
Mas makan nya apa sih mas?? :Q
By
Anonymous, at Monday, April 23, 2012 at 7:33:00 PM GMT+7
@miretahutempe Yang jelas bukan makan uang rakyat 0:)
By
Taufik Nurrohman, at Monday, April 23, 2012 at 7:54:00 PM GMT+7
@Taufik Nurrohman hahaha :D
kapan bikin template yang butiful lagi mas? :)
By
Anonymous, at Monday, April 23, 2012 at 8:36:00 PM GMT+7
@miretahutempe Setelah Saya pikir-pikir ternyata Saya tidak berbakat dalam membuat template. Saya lebih berbakat dalam merapikan atau memperbaiki template yang bermasalah. Saya ini orangnya terlalu perfeksionis. Jadi kalau Saya mencoba membuat sebuah template, semuanya rasanya harus tertata sempurna. Tapi Sayangnya Saya tidak bisa membuatnya sempurna karena tidak ada sesuatu yang sempurna. Template blog Saya sendiri juga masih tetap Saya utak-atik sampai saat ini. Akhirnya ya beginilah, Saya lebih terfokus dalam pembuatan komponen-komponen dan karya-karya kecil yang bisa diterapkan ke dalam template kalian :)
Kalaupun membuat template, mungkin Saya lebih mengutamakan tentang pembuatan kerangka-kerangka standar yang kuat dan meyakinkan. Cuma belum ada niat saja hehe... :p
By
Taufik Nurrohman, at Monday, April 23, 2012 at 8:58:00 PM GMT+7
@Taufik Nurrohman asiik, memang ga ada puasnya dalam utak atik template. dan yang terpenting lebih merasa berguna apabila dapat membantu sesama. hahaha ^_^
By
Anonymous, at Monday, April 23, 2012 at 9:02:00 PM GMT+7
@miretahutempe Barusan Saya cek lagi blogmu, perkembangannya sangat pesat mas! :-bd
By
Taufik Nurrohman, at Monday, April 23, 2012 at 9:25:00 PM GMT+7
@Taufik Nurrohman Wakakakkakaakk Aku gak Nanya Lo Kalau Yang Ini hihihihi
By
Sinto, at Tuesday, April 24, 2012 at 1:13:00 PM GMT+7
Misalnya artikelnya tidak ada gambarnya, hanya video seperti tutorial diatas, dan untuk menampilkan sebagai thumbnail, bagaimana caranya mas?
Makasih sebelumnya
By
Setio Aji, at Tuesday, April 24, 2012 at 6:08:00 PM GMT+7
@Jagad Hakiki Mungkin maksudnya hanya menampilkan gambar video saja, kemudian saat gambar tersebut diklik, itu akan mengarahkan ke halaman video?
Kalau seperti itu tinggal ubah URL http://www.youtube.com/embed/$1 menjadi http://i2.ytimg.com/vi/$1/0.jpg:
$('.post').html(function(i, html) {
var re = /(?:http:\/\/)?(?:www\.)?(?:youtube\.com|youtu\.be)\/(?:watch\?v=)?(.+)/g,
vidthumb = '<a href="http://www.youtube.com/watch?v=$1" target="_blank"><img class="youtube-thumbnail" src="http://i2.ytimg.com/vi/$1/0.jpg" /></a>';
return html.replace(re, vidthumb);
});
Demo: http://jsfiddle.net/tovic/RfnXu/1/
Atau untuk alternatif lain, mungkin kamu berminat dengan YouTube Preloader dari MS-potilas http://yabtb.blogspot.com/2012/02/youtube-videos-lazy-load-improved-style.html :-d
By
Taufik Nurrohman, at Tuesday, April 24, 2012 at 7:16:00 PM GMT+7
@Jagad Hakiki Maksud saya gini mas, saya punya blog yang isinya hanya kumpulan video, entah itu video dari youtube atau dari yang lain. Template yang saya pakai bukan template untuk video, template biasa.
Nah bagaimana agar di homepage ada thumbnail video yang dimaksud, ketika diklik masuk ke postingan. Yang di MS-postilas saya nggak begitu ngerti maksudnya mas
By
Setio Aji, at Tuesday, April 24, 2012 at 8:02:00 PM GMT+7
@Jagad Hakiki Kalau mau mengubah template agar bisa menampilkan thumbnail YouTube dari postingan, bisa kok memakai dasar template BloggerTube lalu dimodifikasi.
Dan lagipula, Saya lihat pada dasarnya di dalamnya sama persis mengenai cara mereka menampilkan thumbnail YouTube di halaman depan. Seperti ini:
var postlink = div.innerHTML.substring(div.innerHTML.indexOf("[postlink]") + 10, div.innerHTML.indexOf("[/postlink]"));
if (vidid == "") {
var imgvid = '<a href="' + postlink + '"><img class="thumbnail" src="http://4.bp.blogspot.com/_WoCJXgXotb8/Srr309bkf_I/AAAAAAAAAB8/r9HXg7EGLYI/s1600/novideo.png" width="' + img_thumb_width + 'px" height="' + img_thumb_height + 'px"/></a>';
} else {
var imgvid = '<a href="' + postlink + '"><img class="thumbnail" src="http://i2.ytimg.com/vi/' + vidid + '/default.jpg" width="' + img_thumb_width + 'px" height="' + img_thumb_height + 'px"/></a>';
};
Masih tetap menggunakan dasar URL http://i2.ytimg.com/vi/.
Ini untuk template Blogspot, kalau untuk template lain Saya angkat tangan mas hehe... :p
By
Taufik Nurrohman, at Tuesday, April 24, 2012 at 8:30:00 PM GMT+7
jadi developer plugin ajj mas,,
By
Unknown, at Thursday, July 5, 2012 at 11:17:00 PM GMT+7
mas taufik mau tanya kenapa linkyoutube dan emoticon nya di blog ku ga bisa tampil ??? dimana kesalahannya ??? mohon direview kezit dot com
By
Unknown, at Sunday, August 18, 2013 at 1:26:00 PM GMT+7
Please follow this pattern:
[1]. http://youtu.be/-joKveiaabA
[2]. http://www.youtube.com/watch?v=-joKveiaabA
And put the JQuery above, inside DOM Ready event:
<script>
$(document).ready(function() {
$('.post-body').html(function(i, html) {
var re = /(?:http:\/\/)?(?:www\.)?(?:youtube\.com|youtu\.be)\/(?:watch\?v=)?(.+)/g,
vid = '<iframe width="420" height="345" src="http://www.youtube.com/embed/$1" frameborder="0" allowfullscreen></iframe>';
return html.replace(re, vid);
});
});
</script>
By
Taufik Nurrohman, at Monday, December 23, 2013 at 9:36:00 AM GMT+7
Maybe because you put it before the JQuery library was loaded.
Terkait: Perkenalan JQuery
By
Taufik Nurrohman, at Monday, December 23, 2013 at 10:56:00 AM GMT+7
I tried it but the video not showing but the thumbnail of video appearing nicely on homepage except that in post it shows link only not video.
By
hehe, at Wednesday, April 22, 2015 at 9:11:00 AM GMT+7
Then maybe you have misplaced the JS code inside a home page conditional tag. Check whether the JS code is present on the item page or not through the source code.
By
Taufik Nurrohman, at Sunday, April 26, 2015 at 8:49:00 PM GMT+7
I put the script : http://www.dte.web.id/2012/04/convert-youtube-url-into-video.html?showComment=1387766162373#c4355823824875987212
inside my HTML template. I put it below jquery
doesnt work. :(
By
hehe, at Monday, June 1, 2015 at 4:40:00 PM GMT+7
It depends on the selector. Try something like:
$('.post-body').html(function(i, html) { … });
By
Taufik Nurrohman, at Wednesday, June 3, 2015 at 10:16:00 AM GMT+7
you mean the .post-bod ?
Changed and doesn't work though.
I'm sorry , I'm very familiar with coding
By
hehe, at Wednesday, June 3, 2015 at 10:47:00 PM GMT+7
$(document).ready(function() {
$('.post-body').html(function() { … });
});
By
Taufik Nurrohman, at Thursday, June 4, 2015 at 7:54:00 AM GMT+7
Damn my typos.
Nope doesn't work too
By
hehe, at Saturday, June 6, 2015 at 5:35:00 PM GMT+7
Post a Comment
<< Home