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
28 Comments:
mancap...
rajin mosting euy, ada murid yg suka bertanya-tanya yah...qiqiqiqi
si sistem :p
haaaaa, wow. nggumun (kagum beuud) akuu ^_^
kreatiiiifffppp beuud yo mas \o/ \o/ \o/ \o/
@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
Mas makan nya apa sih mas?? :Q
@miretahutempe Yang jelas bukan makan uang rakyat 0:)
@Taufik Nurrohman hahaha :D
kapan bikin template yang butiful lagi mas? :)
@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
@Taufik Nurrohman asiik, memang ga ada puasnya dalam utak atik template. dan yang terpenting lebih merasa berguna apabila dapat membantu sesama. hahaha ^_^
@miretahutempe Barusan Saya cek lagi blogmu, perkembangannya sangat pesat mas! :-bd
@Taufik Nurrohman Wakakakkakaakk Aku gak Nanya Lo Kalau Yang Ini hihihihi
Misalnya artikelnya tidak ada gambarnya, hanya video seperti tutorial diatas, dan untuk menampilkan sebagai thumbnail, bagaimana caranya mas?
Makasih sebelumnya
@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
@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
@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
jadi developer plugin ajj mas,,
mas taufik mau tanya kenapa linkyoutube dan emoticon nya di blog ku ga bisa tampil ??? dimana kesalahannya ??? mohon direview kezit dot com
Erm doesn't work
I install the script before right?
Tested some youtube vids and doesn't appear the video
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>
It worked !
But I have to include the script inside the post.
I tried putting the script above and doesn't work.
What am I missing?
Maybe because you put it before the JQuery library was loaded.
Terkait: Perkenalan JQuery
Alright :)
I have learnt something today
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.
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.
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. :(
It depends on the selector. Try something like:
$('.post-body').html(function(i, html) { … });
you mean the .post-bod ?
Changed and doesn't work though.
I'm sorry , I'm very familiar with coding
$(document).ready(function() {
$('.post-body').html(function() { … });
});
Damn my typos.
Nope doesn't work too
Post a Comment
<< Home