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

Ответ 1

Я был бы склонен просто захватить идентификатор видео на этот вопрос и использовать его для формулировки вашей разметки встраивания по своему усмотрению.

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

Здесь более сложная демонстрация.

Ответ 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);
});

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

jsfiddle

Ответ 3

Я использовал эту пару функций для преобразования ссылок youtube в блоке html из редактора wysiwyg во встроенные фреймы.

Как и в случае с другими решениями, это все равно может привести к какому-либо другому html в блоке.

• работает с несколькими видео в одном блоке текста.
• работает с http или https-ссылками.
• работает как с прямым URL-адресом видео 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