nana_log
Home
  • 분류 전체보기 (90)
    • Blog (84)
      • Markup (3)
      • CSS (17)
      • JavaScript (21)
      • Library (10)
      • Tools (1)
      • Web Animation (2)
      • etc. (15)
      • Design (8)
      • Loves (7)
    • 🐿 (5)
      • CSS (2)
      • JS (3)
Home
  • 분류 전체보기 (90)
    • Blog (84)
      • Markup (3)
      • CSS (17)
      • JavaScript (21)
      • Library (10)
      • Tools (1)
      • Web Animation (2)
      • etc. (15)
      • 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.

     

    먼저 비디오(iframe)에게 position: absolute; top: 0; left: 0; width: 100%; height: 100%;를 준다.

    그리고 비디오의 바로 위 부모에게 position: relative; width: 100%; heigth: auto; padding-top: 50%를 주면 된다.

     

    <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 {
      width: 100%;
      max-width: 900px;
      margin: 30px auto;
      border-radius: 30px;
      background-color: #f0f0f0;
      padding: 40px;
      box-sizing: border-box;
      box-shadow: 0px 8px 33px #999;
    }
    
    .video-container {
      position: relative;
      width: 100%;
      height: auto;
      padding-top: 50%;
    }
    
    iframe {
      z-index: 1;
      top: 0;
      left: 0;
      position: absolute;
      width: 100%;
      height: 100%;
    }
    728x90
    저작자표시

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

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

    댓글 11

    관련글

    • [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 3

Total 1,086,381

좋아하니까, 나답게

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

티스토리툴바