유튜브 동영상 URL을 코드 내장으로 변환

유튜브 동영상 URL을 코드 내장으로 변환

유튜브 url을 url을 embed로 변환하기 위해 이것을 사용하고 있습니다.

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

저는 이 질문에 따라 비디오 ID를 간단히 잡아서 당신이 원하는 대로 당신의 내장 마크업을 공식화하는 데 사용하고 싶습니다.

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

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

    return (match && match[2].length === 11)
      ? match[2]
      : null;
}
    
const videoId = getId('http://www.youtube.com/watch?v=zbYf5_S7oJo');
const iframeMarkup = '<iframe width="560" height="315" src="//www.youtube.com/embed/' 
    + videoId + '" frameborder="0" allowfullscreen></iframe>';

console.log('Video ID:', videoId)

여기 좀 더 정교한 데모가 있습니다.

2020년에 이를 보는 사람들은 embed API를 이용하여 임베디드 코드를 얻을 수 있습니다.그 이유는 유튜브 URL에 여러 가지 변형이 있을 수 있고 regEx를 사용하는 것이 최적의 해결책이 아닐 수 있기 때문입니다.

https://www.youtube.com/oembed?url=<URL>&format=<FORMAT>

예:

https://www.youtube.com/oembed?url=https://www.youtube.com/watch?v=gBrmnB5aOSI&format=json

당신이 받을 답변은.

{
"type": "video",
"thumbnail_width": 480,
"provider_name": "YouTube",
"title": "Intro To Live Streaming on YouTube",
"thumbnail_height": 360,
"provider_url": "https://www.youtube.com/",
"version": "1.0",
"height": 270,
"author_name": "YouTube Creators",
"html": "<iframe width=\"480\" height=\"270\" src=\"https://www.youtube.com/embed/gBrmnB5aOSI?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen></iframe>",
"author_url": "https://www.youtube.com/user/creatoracademy",
"width": 480,
"thumbnail_url": "https://i.ytimg.com/vi/gBrmnB5aOSI/hqdefault.jpg"
}

iframe에 html 데이터를 사용할 수 있습니다.

가장 간단한 해결책은 다음과 같습니다.

ytUrl = "https://www.youtube.com/watch?v=DGIXT7ce3vQ"
// replace:
ytUrl.replace('/watch?v=', '/embed/')

답변이 늦었지만 유튜브 url을 Embed로 변환하여 동영상이 작동되도록 하기 위해 사용한 것입니다.

<script>
    function myFunction() {
        var str = "https://www.youtube.com/watch?v=1adfD9";
        var res = str.split("=");
        var embeddedUrl = "https://www.youtube.com/embed/"+res[1];
        document.getElementById("demo").innerHTML = res;
    }
</script>

이게 도움이 됐으면 좋겠습니다.

저는 이 기능 쌍을 사용하여 html 블록의 유튜브 링크를 wywyg 편집기에서 임베디드 iframe으로 변환했습니다.

다른 솔루션과 마찬가지로, 이것은 여전히 블록의 다른 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

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

이는 ReactJS에서 잘 작동합니다.

<iframe src={`https://www.youtube.com/embed/${url.split('='}[1]&autoplay=false`} controls allowfullscreen />

jQuery 필요하신 분.아래는 얻는 기능을 이용한 순수 자바스크립트 코드입니다.vYouTube URL의 파라미터와 전류 대체의 파라미터<script>꼬리에 꼬리를 물다<iframe>

<script>
const url = "https://www.youtube.com/watch?v=qRv7G7WpOoU";
const v = new URL(url).searchParams.get('v');

document.currentScript.insertAdjacentHTML(
  'beforebegin',
  `<h1>Video id=${v}</h1>` +
  `<iframe
      width="480" height="270"
      src="https://www.youtube.com/embed/${v}?feature=oembed"
      allowfullscreen></iframe>`
  );
</script>

데스크톱 링크에서 내장된 ID를 얻는 방법이 이해하기에 더 쉬워 보이지 않습니까?

 const convertLinkToEmbedId = () => {
    const link = "https://www.youtube.com/watch?v=gBrmnB5aOSI&...";
    return link.substring(link.indexOf("=") + 1, link.indexOf("&"));
  };

그런 다음 다음과 같은 방법으로 내장할 수 있습니다.

 <iframe
      width='560'
      height='315'
      src={`https://www.youtube.com/embed/${convertLinkToEmbedId()}`}
      title='YouTube video player'
      frameborder='0'
      allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture;fullscreen;'
    >
</iframe>

문제는 '='와 '&' 사이에 id가 없는 곳에서는 이것이 작동하지 않는다는 것입니다 :(

 @if (path.Contains('&'))
                            path = path.Split('&')[0];

                <iframe width="690" height="400" src="@Model.YourModelNameHERE.Replace("watch?v=","embed/")" frameborder="0" allowfullscreen></iframe>

C# 면도기 페이지 솔루션!

언급URL : https://stackoverflow.com/questions/21607808/convert-a-youtube-video-url-to-embed-code