ハイパーリンクされたURLを埋め込みのYouTubeビデオに置き換える方法

Question

私は、ソースのすべてのプレーンテキストURLを同じURLへのハイパーリンクに変換する静的なWebサイトジェネレータ（Hugo）を使用しています。

<p><a href="https://www.youtube.com/watch?v=xLrLlu6KDss">https://www.youtube.com/watch?v=xLrLlu6KDss</a></p> 

私はむしろそれを埋め込みビデオとして持っています。

平文のYouTube URLを埋め込みコード（example）に変換するコードビットはたくさんありますが、ハイパーリンク時にどのように埋め込みを取得できますか？

誰かが、リンクの値とリンクの値が同じであるすべてのhrefリンクをプレーンURLだけに変換する手助けをすることができますか？例えば

https://www.youtube.com/watch?v=xLrLlu6KDss 

Answer 1

でこれを行うための最善の方法を

<p><a href="https://www.youtube.com/watch?v=xLrLlu6KDss">https://www.youtube.com/watch?v=xLrLlu6KDss</a></p> 

を交換する方法ヒューゴは、埋め込みコード自体を作ることです。あなたが望むならば、マークダウン文書の中にHTMLコードをまっすぐに置くこともできますし、簡単にするにはshortcodeを使うこともできます。ヒューゴもbuilt-in shortcode for YouTubeです。

{{< youtube xLrLlu6KDss >}} 

は、あなたはそれがページを生成するとき、あなたの値下げ文書に、ヒューゴは、YouTubeの動画を埋め込むすることを置く場合、それは任意のカスタムjQueryのコードを必要としません。

---

編集：

あなたは絶対にJavaScriptでこれをしなければならない場合、あなたはこのような何かを行うことができます。 （注：この例ではjQueryのを必要とする。）

$("a").each(function() { 
    // Exit quickly if this is the wrong type of URL 
    if (this.protocol !== 'http:' && this.protocol !== 'https:') { 
    return; 
    } 

    // Find the ID of the YouTube video 
    var id, matches; 
    if (this.hostname === 'youtube.com' || this.hostname === 'www.youtube.com') { 
    // For URLs like https://www.youtube.com/watch?v=xLrLlu6KDss 
    matches = this.search.match(/[?&]v=([^&]*)/); 
    id = matches && matches[1]; 
    } else if (this.hostname === 'youtu.be') { 
    // For URLs like https://youtu.be/xLrLlu6KDss 
    id = this.pathname.substr(1); 
    } 

    // Check that the ID only has alphanumeric characters, to make sure that 
    // we don't introduce any XSS vulnerabilities. 
    var validatedID; 
    if (id && id.match(/^[a-zA-Z0-9]*$/)) { 
    validatedID = id; 
    } 

    // Add the embedded YouTube video, and remove the link. 
    if (validatedID) { 
    $(this) 
     .before('<iframe width="200" height="100" src="https://www.youtube.com/embed/' + validatedID + '" frameborder="0" allowfullscreen></iframe>') 
     .remove(); 
    } 
}); 

これは、ページ内のすべてのリンクを介してループし、それらがYouTubeのからのものであるか否かをチェックする、ビデオIDを見つけIDを検証し、その後、埋め込みへのリンクを変換しますビデオ。 「a」セレクタを、ページ全体ではなくコンテンツ領域内のリンクを指すように調整することは、おそらく良い考えです。また、私はリンクがたくさんあるページではこれが遅いかもしれないと推測しています。そのような場合は、パフォーマンスチューニングを行う必要があります。