반응형 웹디자인에 유튜브 동영상 넣는 방법
페이지 정보
작성자 서방님 댓글 0건 조회 133회 작성일 16-04-28 16:29본문
스마트폰 등 모바일 접속자를 위해 반응형 웹디자인을 많이 사용합니다. 웹브라우저의 가로폭에 따라 레이아웃이 변하는 방식입니다.
그런데 유튜브 동영상 소스는 반응형이 아닙니다. 고정폭과 고정높이로 소스가 생성됩니다. 반응형 웹디자인에 유튜브 동영상을 넣으면 웹브라우저의 가로폭이 작을 때 동영상이 짤리게 됩니다.
이를 방지하기 위해
iframe {width: 100%;}같은 코드를 추가해도, 가로폭만 줄어들 뿐 높이가 줄어들지 않습니다.
웹브라우저 가로폭이 줄었을 때 유튜브 동영상이 가로 세로 비율을 유지하면서 줄어들게 하려면 다음과 같이 합니다.
유튜브 동영상 소스 코드 수정
유튜브 동영상 소스 코드는 보통 다음과 같이 생성됩니다.
<iframe width="560" height="315" src="xxx" frameborder="0" allowfullscreen></iframe>빨간색 코드를 지우고 다음과 같이 div로 감쌉니다.
<div class="youtubeWrap"> <iframe src="xxx" frameborder="0" allowfullscreen></iframe> </div>
CSS 추가
다음의 코드를 CSS에 추가합니다.
.youtubeWrap {
position: relative;
width: 100%;
padding-bottom: 56.25%;
}
.youtubeWrap iframe {
position: absolute;
width: 100%;
height: 100%;
}예제
http://book.cmsfactory.net/etc/youtube-rwd.html
웹브라우저의 가로폭을 변경하면 동영상도 가로 세로 비율을 유지한 채 크기가 변하는 예제입니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>YouTube</title>
<style>
.container {
width: 90%;
margin: auto;
}
.youtubeWrap {
position: relative;
width: 100%;
padding-bottom: 56.25%;
}
.youtubeWrap iframe {
position: absolute;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="container">
<h1>Enjoy the video</h1>
<div class="youtubeWrap">
<iframe src="//www.youtube.com/embed/E5OZ74onSUY" frameborder="0" allowfullscreen></iframe>
</div>
<p>Resize your web browser.</p>
</div>
</body>
</html>
댓글목록
등록된 댓글이 없습니다.
