nana_log
Home
  • 분류 전체보기 (91)
    • Blog (85)
      • Markup (3)
      • CSS (17)
      • JavaScript (21)
      • Library (10)
      • Tools (1)
      • Web Animation (2)
      • etc. (16)
      • Design (8)
      • Loves (7)
    • 🐿 (5)
      • CSS (2)
      • JS (3)
Home
  • 분류 전체보기 (91)
    • Blog (85)
      • Markup (3)
      • CSS (17)
      • JavaScript (21)
      • Library (10)
      • Tools (1)
      • Web Animation (2)
      • etc. (16)
      • Design (8)
      • Loves (7)
    • 🐿 (5)
      • CSS (2)
      • JS (3)
About
블로그 내 검색
Portfolio

nana_log

좋아하는 걸 좋아하는 나나 🤟

  • Blog/CSS

    반응형으로 비디오(유튜브) 삽입하기

    2019. 10. 31.

    by. 나나 (nykim)

    320x100

    See the Pen Responsive Video by NY KIM (@nykim_) on CodePen.

     

    padding-top을 활용하는 방법

     

    1) 비디오(iframe)에게 position: absolute; top: 0; left: 0; width: 100%; height: 100%;를 줍니다.

    2) 부모에게 position: relative; width: 100%; heigth: auto; padding-top: 56.25%를 줍니다.

     

    <h1>Responsive Video</h1>
    <div class="video">
        <div class="video-container">
          <iframe width="100%" height="100%" src="https://www.youtube.com/embed/eitDnP0_83k?controls=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
        </div>
    </div>
    .video-container {
      position: relative;
      width: 100%;
      height: auto;
      padding-top: 56.25%;
      /* 56.25%를 주는 이유는 대부분의 비디오가 16:9 비율이기 때문입니다. (16: 9 = 100 : 56.25) 
         만약 비디오 비율이 다르다면 그에 맞춰 다른 패딩값을 넣어 주세요! */
    }
    
    iframe {
      z-index: 1;
      top: 0;
      left: 0;
      position: absolute;
      width: 100%;
      height: 100%;
    }

     

     

    aspect-ratio를 활용하는 방법

     

    또는 aspect-ratio 속성을 써서 비율을 지정하는 것도 가능합니다. 이 방법은 훨씬 간단합니다!

    다만, 구형 브라우저는 지원하지 않으므로 상황에 따라 선택해서 써주세요. (IE 미지원, Safari on iOS 15+)

     

    .video-container {
      aspect-ratio: 16 / 9;
      /* 비디오 비율에 맞춰 설정 */
    }
    
    iframe {
      width: 100%;
      height: 100%;
    }

     

     

    (+)  댓글로 남겨주신 부분 추가했습니다. 감사합니다! 🫶

    728x90
    저작자표시

    'Blog > CSS' 카테고리의 다른 글

    [CSS 방법론] BEM 방식  (31) 2020.05.17
    [CSS] CSS Grid (그리드) 배우기  (12) 2020.01.29
    [CSS 3D] 인터랙티브 웹 효과 구현하기 (2)  (2) 2019.08.12
    [CSS 3D] 인터랙티브 웹 효과 구현하기 (1)  (5) 2019.08.05
    [SASS] node-sass 사용하기  (0) 2019.08.01

    댓글

    관련글

    • [CSS 방법론] BEM 방식 2020.05.17
    • [CSS] CSS Grid (그리드) 배우기 2020.01.29
    • [CSS 3D] 인터랙티브 웹 효과 구현하기 (2) 2019.08.12
    • [CSS 3D] 인터랙티브 웹 효과 구현하기 (1) 2019.08.05
    맨 위로
전체 글 보기
  • Github
  • Portfolio
  • Mail

Today

Total

좋아하니까, 나답게

Designed by Nana
블로그 이미지
나나 (nykim)
쉽고, 재밌고, 특별한 걸 좋아해요. 걷고 뛰고 구르면서 나아가는 중.

티스토리툴바