빠른 팁: GitHub 페이지에 YouTube 동영상 포함

GitHub Pages은 일부 콘텐츠를 온라인에서 호스팅할 수 있는 좋은 방법입니다. 마크다운 파일을 작성하고 GitHub에 페이지로 생성하라고 지시하기만 하면 됩니다.

문제는 마크다운에 일부 HTML을 추가하여 예를 들어 YouTube 동영상을 삽입할 수 없다는 것입니다. YouTube iframe만 포함하면 작동하지만 전문적인 마크다운 리포지토리로 작업하면 오류 또는 보안 문제로 표시됩니다.

많은 사람들이 사용하는 해결 방법은 다음과 같습니다.

YouTube URL이 중요한 부분인 경우 v= 뒤에 있는 ID입니다. 이 경우에는 JLMbpiywVxQ 입니다.

그런 다음 다음 마크다운을 사용하여 미리 보기 이미지와 함께 비디오에 대한 링크를 포함할 수 있습니다. YouTube는 이러한 미리보기 이미지를 자동으로 생성합니다.

[![Final video of fixing issues in your code in VS Code]
(https://img.youtube.com/vi/JLMbpiywVxQ/maxresdefault.jpg)]
(https://www.youtube.com/watch?v=JLMbpiywVxQ)

그러나 동영상을 마크다운 파일에 삽입하려면 조금 더 해야 합니다.

마크다운 파일이 있는 GitHub 저장소의 루트로 이동하여 _includes 라는 폴더를 만듭니다.

이 폴더에서 youtube.html라는 파일을 만듭니다. 이 HTML과 CSS를 붙여넣고 저장합니다.

<div class="embed-container">
    <iframe width="640" height="390" 
    src="https://www.youtube.com/embed/{{ include.id }}" 
    frameborder="0" allowfullscreen></iframe>
</div>
<style>
.embed-container {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  max-width: 100%;
}
.embed-container iframe,
.embed-container object,
.embed-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
</style>

이제 다음을 사용하여 마크다운 파일에 YouTube 비디오를 삽입할 수 있습니다.

{% include youtube.html id="JLMbpiywVxQ" %}  

ID는 YouTube ID입니다.

손으로 하고 싶지 않다면 작동하는 모습을 보고 포크할 수 있습니다.