Tech Stock logo Tech Stock

유튜브의 영상 고유번호로 Markdown에 임베드하게 넣고싶다
그런데 반응형으로도 하고 싶다. 그럴 경우에 이렇게 하자.

■ Markdown에는 이렇게 입력해주자

{{< youtube qKp8EdDNlj8 >}}

■ layouts/shortcodes/youtube.html

Markdown에서는 youtube.html파일을 읽어들인다

<div class="youtube-wrapper">
  <iframe src="http://www.youtube.com/embed/{{ index .Params 0 }}" allowfullscreen></iframe>
</div>

■ style.css

기본으로 쓰고 있는 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;
}