유튜브 모바일 반응형

유튜브 웹소스를 가져와 적용시킬때 모바일에서는 레이아웃이 깨지는 경우가 있는데 컨테이너 또는 블록(div)를 만들고 그공간에 아래와 같은 소스를 적용시켜 모바일 사이즈를 조절할 수있다.

.video-container {
    text-align: center; 
    position: relative; 
    padding-bottom: 56.25%; 
    padding-top: 300px; 
    height: 0; 
    overflow: hidden; 
    margin: 10px 10px 30px 10px;
}

position은 위치에 대한 명령. 다른 요소들과 겹치지 않게 상대적인 위치를 지정하는 relative선언.

유튜브 프레임의 사이즈를 조절하는 방법은 높이를 고정시키고 padding-bottom으로 전체적인 프레임 사이즈 비율을 깨주면서 자동으로 전체 프레임 비율을 모바일에 맞게 조절할 수 있다.

padding-top은 높이를 담당하기 때문에 전체적인 높이(세로사이즈)를 조절하는 방식으로 적용시킬 수 있다.

꼭 height:0으로 선언해 세로사이즈가 가변적인 형태로 설정될 수 있도록 하고 나머지 넘치는 부분은 overflow:hidden으로 조절 해줄 수 있다.

.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

나의 예시

  <div class="sec6">
    <div class="youtubeWrap">
      <div class="video">
        <iframe src="https://링크" width="741" height="415" frameborder="0"></iframe>
      </div>
    </div>
    <img src="/data/skin/mobile/sec6.jpg" alt="사후관리">
  </div>
  ---
.sec6 {position:relative;}
.sec6 .youtubeWrap {position:absolute;top:33.9%;left:3.7%;width:92%;}
.sec6 .youtubeWrap .video {position:relateve;width:100%;padding-bottom:55.9%;z-index:1}
.sec6 .youtubeWrap .video iframe {position:absolute;top:0;left:0;width:100%;height:100%}