Mengubah URL YouTube menjadi Video

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);
});

Lihat Demo

Lolos untuk dua bentuk URL YouTube seperti ini:

http://youtu.be/-joKveiaabA
http://www.youtube.com/watch?v=-joKveiaabA

Sumber: How to Convert a YouTube Video URL to the Iframe Embed Code, using jQuery

28 Komentar

  • Beben Koben

    mancap...
    rajin mosting euy, ada murid yg suka bertanya-tanya yah...qiqiqiqi
    si sistem :p

  • Putra

    haaaaa, wow. nggumun (kagum beuud) akuu ^_^
    kreatiiiifffppp beuud yo mas \o/ \o/ \o/ \o/

  • Taufik Nurrohman

    @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

  • Anonim

    Mas makan nya apa sih mas?? :Q

  • Taufik Nurrohman

    @miretahutempe Yang jelas bukan makan uang rakyat 0:)

  • Anonim

    @Taufik Nurrohman hahaha :D
    kapan bikin template yang butiful lagi mas? :)

  • Taufik Nurrohman

    @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

  • Anonim

    @Taufik Nurrohman asiik, memang ga ada puasnya dalam utak atik template. dan yang terpenting lebih merasa berguna apabila dapat membantu sesama. hahaha ^_^

  • Taufik Nurrohman

    @miretahutempe Barusan Saya cek lagi blogmu, perkembangannya sangat pesat mas! :-bd

  • Unknown

    @Taufik Nurrohman Wakakakkakaakk Aku gak Nanya Lo Kalau Yang Ini hihihihi

  • Setio Aji

    Misalnya artikelnya tidak ada gambarnya, hanya video seperti tutorial diatas, dan untuk menampilkan sebagai thumbnail, bagaimana caranya mas?

    Makasih sebelumnya

  • Taufik Nurrohman

    @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

  • Setio Aji

    @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

  • Taufik Nurrohman

    @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

  • Unknown

    jadi developer plugin ajj mas,,

  • Unknown

    mas taufik mau tanya kenapa linkyoutube dan emoticon nya di blog ku ga bisa tampil ??? dimana kesalahannya ??? mohon direview kezit dot com

  • Unknown

    Erm doesn't work
    I install the script before right?
    Tested some youtube vids and doesn't appear the video

    • Taufik Nurrohman

      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>
      • Unknown

        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?

      • hehe

        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.

        • Taufik Nurrohman

          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.

          • hehe

            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. :(

            • Taufik Nurrohman

              It depends on the selector. Try something like:

              $('.post-body').html(function(i, html) { … });
              • hehe

                you mean the .post-bod ?
                Changed and doesn't work though.
                I'm sorry , I'm very familiar with coding

Komentar telah ditutup.