나는 마크 업을 처음 접했다. (픽업이 매우 쉽지만). 패키지 작업 중이며 위키 페이지를 도움말 매뉴얼처럼 멋지게 만들려고합니다. 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>
그리고 페이지를 저장했지만 아무 일도 일어나지 않았습니다.
- GitHub 위키 페이지에 YouTube 비디오를 포함시킬 수 있습니까?
- 그렇다면 어떻게?
답변
비디오를 직접 삽입 할 수는 없지만 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 가지 확실한 이점이 있습니다 .
- 마크 다운 (또는 결과 HTML 페이지)을 읽는 사람 에게 비디오를 볼 수 있다는 시각적 신호 가 있습니다 ( 비디오 컨트롤은 클릭 유도 )
- 동영상에서 미리보기 이미지로 사용할 특정 프레임 을 선택할 수 있습니다 (따라서 콘텐츠를 더 매력적으로 만듭니다 )
- 링크 된 이미지를 클릭하면 재생이 시작되는 비디오 의 특정 시간 에 연결할 수 있습니다 . (이 경우 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로 테스트했으며 완벽하게 작동합니다.
- YouTube의 비디오 페이지로 이동하여 공유 버튼을 클릭하십시오
- 퍼가기 선택
- 마크 다운에 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>