Cara Mendeteksi / Mendapatkan Gambar Thumbnail Dari Iframe Yotube Player


Sekarang saya akan mencoba membuat sebuah script Jquery yang berfungsi untuk mendapatkan gambar besar atau gambar kecil dari sebuah URL Video Youtube. Sedangkan letak url video itu terletak di sembarang di sela-sela tag html yang rumit. Function ini akan memperingan kita untuk mendeteksi gambar tanpa kita membuat html gambar secara manual. Berikut ini script sederhana yang akan kita gunakan :

<div id="ytin"><iframe width="420" height="315" src="http://www.youtube.com/embed/vW8SLCiZQMA" frameborder="0" allowfullscreen></iframe></div>

<div id="result"></div>

<script>
var iframe_src       = $('iframe:first').attr('src');
var youtube_video_id = iframe_src.match(/youtube\.com.*(\?v=|\/embed\/)(.{11})/).pop();

if (youtube_video_id.length == 11) {
    var video_thumbnail = $('<img src="//img.youtube.com/vi/'+youtube_video_id+'/0.jpg">');
    $("#result").append(video_thumbnail);
}
</script>

Smoga bisa bermanfaat ........!
Previous
Next Post »