z6c - personal blog about topics

Christian Müller – Letzte Änderung: 13.02.2013 23:09 Uhr

find all youtube links with js (jquery)

Stckoverflow hat map wider Lösungen und ich kein Problem:

Say there is a div that has content and a youtube link. I want to grab that youtube link and embed it.

<div class="content"><p>Here is a cool video.  Check it out: http://www.youtube.com/watch?v=oHg5SJYRHA0 and this one http://www.youtube.com/watch?v=fLBPsZVI8Gc&feature=player_embedded</p></div>
<div class="content"><p>Here is a cool video.  Check it out: http://www.youtube.com/watch?v=fLBPsZVI8Gc&feature=player_embedded</p></div>

Script:

$(document).ready(function(){
 // I added the video size here in case you wanted to modify it more easily
 var vidWidth = 425;
 var vidHeight = 344;

 $('.content:contains("youtube.com/watch")').each(function(){
  var that = $(this);
  var txt = $(this).html();
  // Tthis could be done by creating an object, adding attributes & inserting parameters, but this is quicker
  var e1 = '<obj'+'ect width="' + vidWidth + '" height="' + vidHeight + '"><param name="movie" value="http://www.youtube.com/v/';
  var e2 = '&hl=en&fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" ' +
   'value="always"></param><em'+'bed src="http://www.youtube.com/v/';
  var e3 = '&hl=en&fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="' + vidWidth +
'" ' + 'height="' + vidHeight + '"></embed></object> ';

  var vid = txt.match(/((\?v=)(\w[\w|-]*))/g); // end up with ?v=oHg5SJYRHA0
  if (vid.length) {
   $.each(vid, function(i){
    var ytid = this.replace(/\?v=/,'') // end up with oHg5SJYRHA0
    that.append( e1 + ytid + e2 + ytid + e3 ) 
   })
  }
 })
})

Update
Besser ist die folgende Lösung, da dann nach dem Link und nicht nach dem Text gesucht wird:

    $('a[href*="www.youtube.com/watch"]').each(function(){
        console.log(this);
        var that = $(this);
        var txt = $(this).attr('href');
        // Tthis could be done by creating an object, adding attributes & inserting parameters, but this is quicker
        var e1 = '<obj'+'ect width="' + vidWidth + '" height="' + vidHeight + '"><param name="movie" value="http://www.youtube.com/v/';
        var e2 = '&hl=en&fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" ' +
                'value="always"></param><em'+'bed src="http://www.youtube.com/v/';
        var e3 = '&hl=en&fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="' + vidWidth +
                '" ' + 'height="' + vidHeight + '"></embed></object> ';

        var vid = txt.match(/((\?v=)(\w[\w|-]*))/g); // end up with ?v=oHg5SJYRHA0
        if (vid.length) {
            $.each(vid, function(i){
                var ytid = this.replace(/\?v=/,'') // end up with oHg5SJYRHA0
                that.append( "<br />" + e1 + ytid + e2 + ytid + e3 + "<br />" )
            })
        }

dev jquery stackoverflow youtube

Kommentare für diesen Artikel noch nicht freigeschaltet.

Bitte eine Email an kommentare@zentonic.org mit Betreff "Kommentare für Post 20"