블로그나 웹사이트가 반응형일 때 동영상을 게시한다면 브라우저나 모바일 사이즈에 맞게 크기를 조정해줘야 합니다. 링크 공유시 주어지는 embed code를 그냥 이용하게 되면 고정된 높이와 너비로 영상이 삽입되어 게시글이 지저분해 보이는 경우가 많기 때문인데요. 이 경우 데스크탑에서는 영상이 잘 보이지만 모바일 상에선 모양이 깨진다는 문제도 있습니다.
조금 귀찮지만 간단한 작업을 거치면 데스크탑에서도, 모바일에서도 알맞게 영상을 로드 할 수 있습니다.
우선 responsive youtube embed code를 <div>로 감싸고 padding bottom을 50%~60%으로 지정합니다. 그리고 child elements (iframe, object embed)를 100% width, 100% height, 그리고 absolute position으로 지정해줍니다. 이렇게 embed elements가 자동으로 fullwidth 크기가 되는 식으로 만드는 건데요.
아래와 같은 CSS를 추가해주시면 됩니다.
CSS.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px; height: 0; overflow: hidden;
}
.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
그리고 HTML을 아래와 같이 수정해주시면 됩니다.
HTML
<div class="video-container"><iframe width="853" height="480" src="https://www.youtube.com/embed/ZeDRWTc5zgI" frameborder="0" allowfullscreen</iframe</div>
여기까지 마치셨다면 데스크탑, 타블렛, 모바일 폰 어디서든 동영상이 반응형으로 로드되실 겁니다. 이 포스팅은 유뷰트 동영상을 예로 들었으나 다른 동영상의 embed code를 넣어도 무방합니다.
차후 문제가 있다면 댓글을 남겨주시기 바랍니다.
No comments