[깃허브블로그] 유튜브 첨부 방법
in Development on CSS
깃허브 블로그에 유튜브 첨부 방법
일단 유튜브 동영상 첨부를 해보자.
이렇게 다른 블로그들처럼 유튜브를 깔끔하게 올릴수 있다.
이 방법을 간단히 말하면 _includes 를 활용한 방식으로 _include 폴더에 동영상을 삽입할 코드를 넣을 html파일을 하나 만들고
<!-- <iframe width= "100%" height="315" src="https://www.youtube.com/embed/" frameborder="0" allowfullscreen></iframe> -->
<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><div class="embed-container"><iframe src="https://www.youtube.com/embed/" frameborder="0" allowfullscreen=""></iframe></div>
이 코드를 집어 넣는다. 나는 youtubeplayer(개인 취향 이름).html이라는 html 파일을 만들었다. 그리고 width와 height는 본인이 원하는대로 넣어도 된다.
그리고나서 원하는 포스팅 파일에 이 코드를 삽입한다. {% include 파일명.html id="유튜브동영상url" %}
id는 유튜브 주소(ex. https://www.youtube.com/watch?v=-MtOm4vuL3o)를 보면 ?v= 뒤에 있는 것을 말한다.
그러면 이렇게 깔끔하게 동영상이 들어간 것을 확인할 수 있다.
