Tech Stock logo Tech Stock

다음과 같이 파일을 _includes디렉토리에 추가해준다.
_includes/youtube.html

<div class="youtube-wrapper">
    <iframe src="https://www.youtube.com/embed/{{ include.id }}" allowfullscreen></iframe>
</div>

간단하게 설명을 하자면,
https://www.youtube.com/embed/
라는 유튜브의 임베드 서비스가 있고

그 뒤쪽에 include.id 라고 적힌것은 지킬 블로그에서 변수 선언 식으로 쓰겠다는거다.
AngularJS하시는분은 아실꺼다 -_-;;
이중중괄호 표현식을(변수 선언을 이중 중괄호 안에 함) 지킬도 쓴다.
리퀴드 템플릿이라고 함.

이러한 내용을 youtube-wrapper이라는 이름의 div태그로 뤱핑해서 디자인 하겠다는 뜻 -_-;;


다음과 같이 스타일 시트에 추가해준다.
assets/css/styles.css


.youtube-wrapper {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
}
.youtube-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}


왜 56.25퍼센트인지는 링크를 누르시면 잘 설명되어 있습니다.

만약 붓스트랩을 적용한 지킬블로그 라면
_sass에 별도의 파일을 만들어서 위의 내용을 적고
main.css에서 임포트 선언을 하면 된다.


이제 완성 되었다.
유튜브에서 공유 누르면 나오는 URL에서
https://youtu.be/qKp8EdDNlj8

뒤쪽의 qKp8EdDNlj8 이부분만 밑에와 같은 식으로 포스팅 파일에 써주면 된다.

Markdown

테스트 영상