나는 마크 업을 처음 접했다. (픽업이 매우 쉽지만). 패키지 작업 중이며 위키 페이지를 도움말 매뉴얼처럼 멋지게 만들려고합니다. YouTube 비디오 링크를 위키 페이지에 매우 쉽게 삽입 할 수 있지만 YouTube 비디오를 어떻게 포함합니까? 이것이 불가능할 수도 있음을 알고 있습니다.

HTML 태그를 사용할 수 있다고 읽었으므로 다음과 같이이 링크 마다 HTML로 임베드를 시도했습니다 .

<object width="425" height="350">
  <param name="movie" value="http://www.youtube.com/user/wwwLoveWatercom?v=BTRN1YETpyg" />
  <param name="wmode" value="transparent" />
  <embed src="http://www.youtube.com/user/wwwLoveWatercom?v=BTRN1YETpyg"
         type="application/x-shockwave-flash"
         wmode="transparent" width="425" height="350" />
</object>

그리고 페이지를 저장했지만 아무 일도 일어나지 않았습니다.

1. GitHub 위키 페이지에 YouTube 비디오를 포함시킬 수 있습니까?
2. 그렇다면 어떻게?

비디오를 직접 삽입 할 수는 없지만 YouTube 비디오에 연결되는 이미지를 넣을 수 있습니다.

[![IMAGE ALT TEXT HERE](https://img.youtube.com/vi/YOUTUBE_VIDEO_ID_HERE/0.jpg)](https://www.youtube.com/watch?v=YOUTUBE_VIDEO_ID_HERE)

자세한 내용 은 GitHub의 Markdown 치트 시트 를 참조하십시오 .

완전한 예

@MGA 의 답변 에서 확장

마크 다운에 비디오 를 삽입 할 수는 없지만 다음 형식을 사용하여 마크 업 파일에 유효한 링크 된 이미지를 포함시켜 "가짜"를 만들 수 있습니다.

[![IMAGE ALT TEXT](http://img.youtube.com/vi/YOUTUBE_VIDEO_ID_HERE/0.jpg)](http://www.youtube.com/watch?v=YOUTUBE_VIDEO_ID_HERE "Video Title")

마크 다운 설명

이 마크 업 스 니펫이 복잡해 보이면 두 부분으로 나눕니다.

![image alt text](https://example.com/link-to-image)
링크에 싸인 이미지
[link text](https://example.com/my-link "link title")

유효한 마크 다운 및 YouTube 썸네일을 사용하는 예 :

YouTube에서 미리보기 이미지를 직접 소싱하고 실제 동영상에 연결하므로 사용자가 이미지 / 썸네일을 클릭하면 동영상으로 이동합니다.

암호:

[![Everything Is AWESOME](https://img.youtube.com/vi/StTqXEQ2l-Y/0.jpg)](https://www.youtube.com/watch?v=StTqXEQ2l-Y "Everything Is AWESOME")

또는 독자에게 이미지 / 섬네일이 실제로 재생 가능한 비디오라는 시각적 신호를 제공하려면YouTube에서 비디오의 고유 한 스크린 샷을 찍고 대신 섬네일로 사용하십시오.

비디오 컨트롤이있는 스크린 샷을 Visual Cue로 사용하는 예 :

암호:

[![Everything Is AWESOME](http://i.imgur.com/Ot5DWAW.png)](https://youtu.be/StTqXEQ2l-Y?t=35s "Everything Is AWESOME")

 명확한 장점

이를 위해서는 몇 가지 추가 단계 ( a ) 가 비디오 의 스크린 샷 을 찍고 ( b ) 이미지를 업로드 하여 이미지를 썸네일로 사용할 수있는 3 가지 확실한 이점이 있습니다 .

1. 마크 다운 (또는 결과 HTML 페이지)을 읽는 사람 에게 비디오를 볼 수 있다는 시각적 신호 가 있습니다 ( 비디오 컨트롤은 클릭 유도 )
2. 동영상에서 미리보기 이미지로 사용할 특정 프레임 을 선택할 수 있습니다 (따라서 콘텐츠를 더 매력적으로 만듭니다 )
3. 링크 된 이미지를 클릭하면 재생이 시작되는 비디오 의 특정 시간 에 연결할 수 있습니다 . (이 경우 35 초부터)

스크린 샷을 찍고 업로드하는 데 몇 초가 걸리지 만 비용이 많이 듭니다.

어디서나 작동합니다!

이것은 표준 마크 다운이므로 어디에서나 작동합니다. GitHub, Reddit, Ghost 및 Stack Overflow에서 사용해보십시오.

비 메오

이 방법은 Vimeo 비디오에서도 작동합니다

예

암호

[![Little red riding hood](http://i.imgur.com/7YTMFQp.png)](https://vimeo.com/3514904 "Little red riding hood - Click to Watch!")

노트:

• 스크린 샷 찍는 방법 : http://www.take-a-screenshot.org/ (모든 플랫폼)
• 썸네일 이미지 업로드 : 스크린 샷을 만든 후에는 이미지를 imgur.com 으로 끌어다 놓아 썸네일로 즉시 사용할 수 있습니다.
• YouTube 미리보기 이미지 정보 : YouTube API에서 YouTube 비디오 미리보기 이미지를 얻으려면 어떻게해야하나요?

마크 다운은 공식적으로 비디오 임베딩을 지원 하지 않지만 그 안에 원시 HTML을 임베드 할 수 있습니다. GitHub Pages로 테스트했으며 완벽하게 작동합니다.

1. YouTube의 비디오 페이지로 이동하여 공유 버튼을 클릭하십시오
2. 퍼가기 선택
3. 마크 다운에 HTML 스 니펫을 복사하여 붙여 넣기

스 니펫은 다음과 같습니다.

    <iframe width="560" height="315"
src="https://www.youtube.com/embed/MUQfKFzIOeU" 
frameborder="0" 
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" 
allowfullscreen></iframe>

추신 : 여기 에서 라이브 미리보기를 확인할 수 있습니다

HTML 태그가 마크 다운 + 가운데 정렬보다 더 좋아하는 경우 :

<div align="center">
  <a href="https://www.youtube.com/watch?v=YOUTUBE_VIDEO_ID_HERE"><img src="https://img.youtube.com/vi/YOUTUBE_VIDEO_ID_HERE/0.jpg" alt="IMAGE ALT TEXT"></a>
</div>

축소판 그림 및 링크를 사용하여 비디오를 가운데 정렬 :

<div align="center">
      <a href="https://www.youtube.com/watch?v=StTqXEQ2l-Y">
     <img 
      src="https://img.youtube.com/vi/StTqXEQ2l-Y/0.jpg" 
      alt="Everything Is AWESOME" 
      style="width:100%;">
      </a>
    </div>

결과:

이것을 단순화하기 위해 https://yt-embed.herokuapp.com/ 을 만들었습니다 . 위의 예에서 사용법이 직접적입니다.

[![Everything Is AWESOME](https://yt-embed.herokuapp.com/embed?v=StTqXEQ2l-Y)](https://www.youtube.com/watch?v=StTqXEQ2l-Y "Everything Is AWESOME")

결과는 다음과 같습니다.

https://img.youtube.com/vi/ 대신 이미지로 https://yt-embed.herokuapp.com/embed?v=[video_id] 로 전화 하십시오 .

• Markdown에서 html 코드를 사용할 수 있습니다.
• support.google.com/youtube에서 동영상 또는 재생 목록 퍼가기 의 공식 문서를 확인하십시오.

<iframe width="560" height="315"
src="https://www.youtube.com/embed/videoseries?list=PLx0sYbCqOb8TBPRdmBHs5Iftvv9TPboYG"
frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

YouTube에 대한 추가 팁, 요령 확인