Youtube영상 반응형으로 게시하기
Last updated June 30, 2022
Quartz의경우 Hugo 자체에서
Youtube Shortcode를 지원하여 편하게 쓸 수 있다. 이 경우 반응형에 맞게 크기가 조절된다.
Jekyll의 경우에는 자신이 CSS를 설정해 주어야 한다. _sass 폴더 아래 _style.scss 파일 하단에 아래와 같읕 코드를 추가한다.
1
2
3
4
5
6
7
8
9
10
11
12
13
| .video-container {
position:relative;
height:0;
padding-bottom:56.25%;
}
.video-container iframe {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
|
그리고 Youtube를 게시할 때 아래와 같은 html코드를 사용한다
1
2
3
| <div class="video-container">
<iframe src="https://youtube주소" frameborder="0" allowfullscreen></iframe>
</div>
|
이렇게 youtube 영상을 게시하면 모바일에서나 컴퓨터에서나 반응형에 알맞게 조절되어 보인다.