Конвертировать видео с YouTube для встраивания кода

Question

Я использую это для преобразования URL-адреса youtube для вставки URL-адреса.

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 и использовать его, чтобы сформулировать свой код вставки разметки, как вам нравится.

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

Некоторая разработка на демонстрации истервуда для вашего рассмотрения. Упрощает и добавляет больше функций для многократного использования.

jsfiddle

Answer 3

Я использую эту пару функций для преобразования YouTube ссылки в блоке HTML из WYSIWYG редактора в встроенные фреймы.

Как и в случае с другими решениями, это все равно может калечить некоторые другие 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