nana_log
Home
  • 분류 전체보기 (85)
    • Blog (79)
      • Markup (3)
      • CSS (15)
      • JavaScript (21)
      • Framework (9)
      • Tools (0)
      • Web Animation (2)
      • etc. (15)
      • Design (8)
      • Loves (6)
    • 🐿 (5)
      • CSS (2)
      • JS (3)
Home
  • 분류 전체보기 (85)
    • Blog (79)
      • Markup (3)
      • CSS (15)
      • JavaScript (21)
      • Framework (9)
      • Tools (0)
      • Web Animation (2)
      • etc. (15)
      • Design (8)
      • Loves (6)
    • 🐿 (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 방식  (22) 2020.05.17
    [CSS] CSS Grid (그리드) 배우기  (3) 2020.01.29
    반응형으로 비디오(유튜브) 삽입하기  (11) 2019.10.31
    [CSS 3D] 인터랙티브 웹 효과 구현하기 (2)  (2) 2019.08.12
    [CSS 3D] 인터랙티브 웹 효과 구현하기 (1)  (4) 2019.08.05
    [SASS] node-sass 사용하기  (0) 2019.08.01

    댓글 11

    • 프로필사진
      zineeworld 2020.07.20 15:52 신고

      유튜브 플레이어는 보통 16:9 비율 이기 때문에, padding-bottom: 50% 대신 padding-bottom: 56.25% 값을 넣어주면 더 좋아요!

      100 : 56.25 = 16 : 9

      수정/삭제답글
      • 프로필사진
        나나 (nykim) 2020.08.12 22:22 신고

        오!! 비율까지 고려한 꼼꼼한 값 설정 좋네요+_+!! 좋은 정보 감사합니다 😍

        수정/삭제
    • 프로필사진
      afternoon 2020.07.28 07:30

      완전꿀팁 넘 감사합니다!

      수정/삭제답글
      • 프로필사진
        나나 (nykim) 2020.08.12 22:23 신고

        저도 열심히 토막지식 줍줍하고 있어요!ㅎㅎ 도움이 되셨다면 다행입니다~

        수정/삭제
    • 프로필사진
      kin 2020.09.27 17:08

      혹시 영상은 어떻게 바꿀 수 있을까요? 다른 유튜브링크로 넣으니까 안나오던데

      수정/삭제답글
      • 프로필사진
        나나 (nykim) 2021.01.13 01:34 신고

        헛 답이 늦었네요!!
        원하는 유튜브 영상 클릭 후, '공유 - 퍼가기' 클릭해서 나오는 <iframe>소스로 교체해서 활용하시면 됩니다!

        수정/삭제
    • 프로필사진
      program sky 2021.05.02 16:47

      알라딘 영상 iframe 으로 링크 가져오고싶은데 동영상을 재생할 수 없음 이라는 메세지로 가져올수가 없습니다. ㅠㅠ 혹시 방법이 있을까요

      수정/삭제답글
      • 프로필사진
        나나 (nykim) 2021.05.15 17:30 신고

        안녕하세요, program sky님!
        찾아보니 '동영상을 재생할 수 없음'은 동영상 업로드 시의 설정 때문에 그렇다고 합니다.
        (특정 국가에서 재생 금지, 퍼가기 허용 금지 등)
        이건 사용자가 해결할 수 없는 문제라 다른 영상을 활용하셔야 할 거 같습니다.

        수정/삭제
    • 프로필사진
      ellie 2021.06.21 12:00

      완전 유용한 정보에요! 항상 유튜브 동영상 제맘대로 였는데 이렇게 하면 더 수월하게 작업 할 수 있겠어요!
      유용한 팁 감사합니다~!

      수정/삭제답글
    • 프로필사진
      DW 2021.11.11 08:26

      오 좋은 팁 감사합니다 :)

      수정/삭제답글
    • 프로필사진
      frog 2022.03.25 11:04

      감사합니다!! ^^

      수정/삭제답글

    관련글

    • [CSS 방법론] BEM 방식 2020.05.17
    • [CSS] CSS Grid (그리드) 배우기 2020.01.29
    • [CSS 3D] 인터랙티브 웹 효과 구현하기 (2) 2019.08.12
    • [CSS 3D] 인터랙티브 웹 효과 구현하기 (1) 2019.08.05
    맨 위로
이전
1 ··· 6 7 8 9 10 11 12 13 14 15
다음
전체 글 보기
  • Github
  • Portfolio
  • Mail

Today 946

Total 723,213

좋아하니까, 나답게

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