Konvertieren Sie eine Youtube-Video-URL zum Einbetten von Code

Question

Ich benutze dies um Youtube URL zu konvertieren, um URL einzubetten.

text(t).html().replace(/(?:http:\/\/)?(?:www\.)?(?:youtube\.com)\/(?:watch\?v=)?(.+)/g, '<iframe width="320" height="280" src="//www.youtube.com/embed/$1" frameborder="0" allowfullscreen></iframe>') 

Wie kann ich es selbst ignorieren lassen?

t = $('<div></div>').text(t).html().replace(/(?:http:\/\/)?(?:www\.)?(?:youtube\.com)\/(?:watch\?v=)?(.+)/g, '<iframe width="400" height="380" src="//www.youtube.com/embed/$1" frameborder="0" allowfullscreen></iframe>') 

und einen eingebetteten Link

<iframe width="560" height="315" src="//www.youtube.com/embed/1adfD9" frameborder="0" allowfullscreen></iframe> 

Oder mit anderen Worten, wie kann ich es auf Links wie dies nur funktioniert und alles andere ignorieren?

http://www.youtube.com/watch?v=1adfD9 
www.youtube.com/watch?v=1adfD9 
youtube.com/watch?v=1adfD9 

Answer 1

würde ich geneigt sein, einfach die Video-ID pro this question zu greifen und verwenden Sie es Ihre einbetten Markup zu formulieren, wie Sie möchten.

http://jsfiddle.net/isherwood/cH6e8/

function getId(url) { 
    var regExp = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]*).*/; 
    var match = url.match(regExp); 

    if (match && match[2].length == 11) { 
     return match[2]; 
    } else { 
     return 'error'; 
    } 
} 

var videoId = getId('http://www.youtube.com/watch?v=zbYf5_S7oJo'); 

var iframeMarkup = '<iframe width="560" height="315" src="//www.youtube.com/embed/' 
    + videoId + '" frameborder="0" allowfullscreen></iframe>'; 

Here's a more elaborate demo.

Answer 2

function popYouTubeId(buttonid) { 
    var youTubeUrl = $(buttonid).attr('data-url'); 
    var youTubeId; 
    var regExp = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]*).*/; 
    var match = youTubeUrl.match(regExp); 
    if (match && match[2].length == 11) { 
     youTubeId = match[2]; 
    } else { 
     youTubeId = 'no video found'; 
    } 
    $('#ytvideo').html('<div class="youtubepopup"><a class="closex">x</a><iframe width="560" height="315" src="//www.youtube.com/embed/' + youTubeId + '" frameborder="0" allowfullscreen></iframe></div>'); 
    $('a.closex').click(function(){ 
     $('.youtubepopup').remove(); 
    }); 
} 

var buttonid; 

$('.videobutton').click(function(){ 
    buttonid = '#'+$(this).attr('id'); 
    popYouTubeId(buttonid); 
}); 

Einige Ausführungen zu ishorwoods Demo für Ihre Überlegung. Vereinfacht und bietet mehr Funktionen für die Mehrfachnutzung.

jsfiddle

Answer 3

Ich habe dieses Paar von Funktionen unter Verwendung von YouTube-Links in einem Block von HTML-Code aus einem WYSIWYG-Editor in eingebetteter Iframes zu konvertieren.

Wie bei anderen Lösungen kann dies immer noch einige andere HTML-Code im Block.

• Arbeiten mit mehreren Videos in einem Textblock
• Arbeiten mit http oder https Links
• funktioniert sowohl mit der direkten URL des Videos youtube.com/watch?v=UxSOKvlAbwI und die Aktie Links youtu.be/UxSOKvlAbwI

Code:

createYoutubeEmbed = (key) => { 
    return '<iframe width="420" height="345" src="https://www.youtube.com/embed/' + key + '" frameborder="0" allowfullscreen></iframe><br/>'; 
}; 

transformYoutubeLinks = (text) => { 
    if (!text) return text; 
    const self = this; 

    const linkreg = /(?:)<a([^>]+)>(.+?)<\/a>/g; 
    const fullreg = /(https?:\/\/)?(www\.)?(youtube\.com\/watch\?v=|youtu\.be\/)([^& \n<]+)(?:[^ \n<]+)?/g; 
    const regex = /(?:https?:\/\/)?(?:www\.)?(?:youtube\.com\/watch\?v=|youtu\.be\/)([^& \n<]+)(?:[^ \n<]+)?/g; 

    let resultHtml = text; 

    // get all the matches for youtube links using the first regex 
    const match = text.match(fullreg); 
    if (match && match.length > 0) { 
    // get all links and put in placeholders 
    const matchlinks = text.match(linkreg); 
    if (matchlinks && matchlinks.length > 0) { 
     for (var i=0; i < matchlinks.length; i++) { 
     resultHtml = resultHtml.replace(matchlinks[i], "#placeholder" + i + "#"); 
     } 
    } 

    // now go through the matches one by one 
    for (var i=0; i < match.length; i++) { 
     // get the key out of the match using the second regex 
     let matchParts = match[i].split(regex); 
     // replace the full match with the embedded youtube code 
     resultHtml = resultHtml.replace(match[i], self.createYoutubeEmbed(matchParts[1])); 
    } 

    // ok now put our links back where the placeholders were. 
    if (matchlinks && matchlinks.length > 0) { 
     for (var i=0; i < matchlinks.length; i++) { 
     resultHtml = resultHtml.replace("#placeholder" + i + "#", matchlinks[i]); 
     } 
    } 
    } 
    return resultHtml; 
}; 

jsfiddle