반응형 웹에 동작하는 유튜브 영상 삽입하기

· 1 min

문제

  • markdown 문법으로 작성된 파일에는 html의 ‘iframe’ 코드가 동작하지 않았다.


해결 순서

  • _includes 디렉토리에 youtube.html 추가하기(상세 코드는 링크 참고)

  • assets/css 디렉토리에 있는 main.css파일에 스타일 코드 추가하기(상세 코드는 링크 참고)

  • 유뷰트 링크 https://youtu.be/뒤쪽부분만 포스팅 파일에 입력

1
2
3
4

<div class="youtube-wrapper">
    <iframe src="https://www.youtube.com/embed/뒤쪽부분" allowfullscreen></iframe>
</div>


테스트영상

1
2
3
4

<div class="youtube-wrapper">
    <iframe src="https://www.youtube.com/embed/740kzCGWTFQ?start=1234" allowfullscreen></iframe>
</div>


참고



Samantha
Samantha 7년차 글쟁이. 경제지와 뉴미디어에서 기자로 일하다, 현재 IT 기업에서 인공지능 콘텐츠를 쓰고 있다. 취미로 생산성 앱을 활용한 글쓰기 프로세스를 연구한다.
comments powered by Disqus