하이퍼 링크 된 URL을 삽입 된 YouTube 동영상으로 바꾸는 방법

Question

원본 소스의 모든 일반 텍스트 URL을 동일한 URL의 하이퍼 링크로 변환하는 정적 웹 사이트 생성기 (Hugo)로 작업하고 있습니다.

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

나는 임베디드 비디오로 만들고 싶습니다.

평범한 YouTube URL을 작동하는 퍼가기 (example)로 변환 할 수있는 코드 비트가 많지만 하이퍼 링크되었을 때 퍼가기를 얻으려면 어떻게해야합니까?

누군가가 링크 값이 일반 URL과 동일한 경우 모든 href 링크를 변환하도록 도울 수 있습니까? 예 :

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> 

을 교체하는 방법 휴고가 삽입 코드 자체를 만드는 것입니다. 원하는 경우 Markdown 문서 안에 HTML 코드를 넣거나 쉽게 작성할 수 있습니다. shortcode을 사용할 수 있습니다. Hugo도 built-in shortcode for YouTube입니다.

{{< youtube xLrLlu6KDss >}} 

당신은이 페이지를 생성 할 때 인하 문서에서, 휴고가 YouTube 동영상을 삽입 할 것을 넣으면, 그것은 사용자 정의 jQuery 코드를 필요로하지 않습니다.

---

편집 :

당신이 절대적으로 자바 스크립트를 사용하여이 작업을 수행해야하는 경우, 당신은 같은 것을 할 수 있습니다. (참고 :.이 예제는 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"선택기를 전체 페이지가 아닌 내용 영역의 링크를 가리 키도록 조정하는 것이 좋습니다. 또한, 많은 링크가있는 페이지의 경우 속도가 느릴 수 있습니다. 그렇다면 성능 튜닝을해야 할 수도 있습니다.