javascript YouTubeリンクを埋め込んでビデオを埋め込む

Question

私は多くのリンクをマイページにランダムに配置しています。 YouTubeのリンクのいずれかの形式を取得し、YouTubeの埋め込みにそれを回すためにJavaScriptでどのような方法がある

<a href="https://youtu.be/4tG274QuqHM" title="Go To https://youtu.be/4tG274QuqHM" target="_blank" style="text-decoration:none;">https://youtu.be/4tG274QuqHM</a> 

または

<a href="https://youtube.com/watch?v=4tG274QuqHM" title="Go To https://youtube.com/watch?v=4tG274QuqHM" target="_blank" style="text-decoration:none;">https://youtube.com/watch?v=4tG274QuqHM</a> 

または

Any Other YouTube Video Link Format 

：このようなリンクを持っている場合Iframe、JavaScriptを使用して、このように見えるようにします。

<iframe width="420" height="345" src="http://www.youtube.com/embed/4tG274QuqHM?autoplay=0&autohide=1&controls=2&rel=0" frameborder="0" allowfullscreen="true"></iframe> 

誰でもこのコードを修正して動作させることができますか？

$(document).ready(function() { 
    $('a').each(function() { 
     var matches = $(this).attr("href").match(/^(?:https?:\/\/)?(?:www\.)?(?:youtu\.be\/|youtube\.com\/(?:embed\/|v\/|watch\?v=|watch\?.+&v=))((\w|-){11})(?:\S+)?$/); 
      if(matches){ 
       $(this).attr("class","youtube-link"); 
      } 
    }); 
    $('a.youtube-link').each(function() { 
     var yt_url = this.href, 
      yt_id = yt_url.split('?v=')[1], 
      yt_id = yt_url.split('embed/')[1], 
      yt_title = $(this).text(); 
     $(this).replaceWith('<iframe style="max-width:560px;max-height:315px;" width="600" height="600" src="http://www.youtube.com/embed/' + yt_id + '?rel=0" frameborder="0" allowfullscreen></iframe>'); 
    }); 
}); 

Answer 1

このリンクをチェックします。 YouTubeのiFrameに関するGoogleのドキュメントです。 https://developers.google.com/youtube/player_parameters#Embedding_a_Player

Answer 2

あなたは、単にanchorタグにクリックでhref値を抽出し、iframeタグと既存のanchorタグを置き換えることができます。

<a href="https://youtube.com/watch?v=4tG274QuqHM" title="Go To https://youtube.com/watch?v=4tG274QuqHM" target="_blank" style="text-decoration:none;">https://youtube.com/watch?v=4tG274QuqHM</a> 
<br> 
<a href="http://www.youtube.com/embed/XGSy3_Czz8k" title="Go To http://www.youtube.com/embed/XGSy3_Czz8k" target="_blank" style="text-decoration:none;">http://www.youtube.com/embed/XGSy3_Czz8k</a> 
<script> 
$('a').click(function(e) 
{ 
    var target = $(this).attr('href'); 
    var iframe = $('<iframe/>',{ width: "420", height: "315" , src : target}); 
    $(this).replaceWith(iframe); 
    e.preventDefault(); 
}); 
</script> 

例：あなたは、実際にhttps://jsfiddle.net/4nqhqu03/