將YouTube視頻網址轉換爲嵌入代碼

Question

我正在使用此功能將youtube網址轉換爲嵌入網址。

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>') 

我該如何讓它忽略它本身？

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>') 

和嵌入的鏈接

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

或者，換句話說，我怎樣才能使它只對鏈接這樣的工作，而忽略其他一切？

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

Answer 1

我傾向於簡單地抓住每this question視頻ID，並使用它，只要你喜歡，制定您的嵌入標記。

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

對isherwood的演示進行一些闡述以供您考慮。簡化並將更多功能包裝到多功能的功能中。

jsfiddle

Answer 3

我一直在使用這兩個函數到YouTube鏈接轉換成HTML塊從一個所見即所得的編輯器到嵌入式I幀。

與其他解決方案一樣，這仍然可以破壞塊中的其他html。

• 作品包含多部影片中的一個文字塊
• 作品與HTTP或HTTPS鏈接
• 作品同時與視頻youtube.com/watch?v=UxSOKvlAbwI的直接鏈接和共享鏈接youtu.be/UxSOKvlAbwI

代碼：

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