1 2 3 4 5 6 L

Page Header > Subtitle

유튜브 동영상 반응형으로 넣기

튜브 동영상 소스 코드는 iframe을 이용하고, 가로 크기와 세로 크기가 정해져있습니다.

<iframe width="560" height="315" src="xxx" frameborder="0" allowfullscreen></iframe>

이 코드를 반응형 웹에 넣으면 모바일 기기로 보았을 때 레이아웃을 벗어나게 됩니다.

이를 해결하는 방법을 소개합니다.

CSS 추가

다음 코드를 CSS에 추가합니다.

.youtubeWrap {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
}
.youtubeWrap iframe {
  position: absolute;
  width: 100%;
  height: 100%;
}

유튜브 소스 코드 변경

유튜브 소스 코드를 youtubeWrap을 클래스 값으로 가지는 요소로 감쌉니다.

<div class="youtubeWrap">
  <iframe width="560" height="315" src="xxx" frameborder="0" allowfullscreen></iframe>
</div>

예제

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>YouTube</title>
    <style>
      .youtubeWrap {
        position: relative;
        width: 100%;
        padding-bottom: 56.25%;
      }
      .youtubeWrap iframe {
        position: absolute;
        width: 100%;
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div class="youtubeWrap">
      <iframe width="560" height="315" src="http://www.youtube.com/embed/D4Z2nEdzkdc" frameborder="0" allowfullscreen></iframe>
    </div>
  </body> 

</html> 

0
0
이 글을 페이스북으로 퍼가기 이 글을 트위터로 퍼가기 이 글을 카카오스토리로 퍼가기 이 글을 밴드로 퍼가기
captcha
자동등록방지 숫자입력

HTML/CSS

번호 제목 글쓴이 날짜 조회수
8 [CSS] nth-child (n번째 부터 n번째 까지 css적용) 미도어묵 11-24 742
7 유튜브 동영상 반응형으로 넣기 미도어묵 09-11 573
6 HTML5에서 다른 frame의 문서에 속한 객체 접근 방법 미도어묵 07-29 566
5 table등의 null 값에 특정값 삽입 css 미도어묵 12-29 288
4 CSS로 글자 자르기 - 한 줄, 여러 줄 관리자 05-22 288
3 CSS3 오브젝트 채우기, 위치조정 (object-fit, object-position) 속성 관리자 05-22 294
2 날짜와 시간 입력을 도와주는 데이트 피커 15가지 관리자 04-25 329
1 버튼디자인 및 오버효과를 간편하게 줄수있는 bttn.css 관리자 04-25 253