홍페이지 HONGPAGE

  • 홈
  • 디자인
  • 개발
  • TIP
  • Link

쇼츠

디자인/html·css
유튜브 영상, 쇼츠 화면 반응형 코드 iframe embed

유튜브 영상이나 쇼츠를 유튜브에서 복사한 코드 그대로 가져오는 경우, 반응형이 아니라서 기기에 따라 양옆에 여백이 생기게 된다.  적용전   반영형 영상 1) 먼저 영상 아이프레임 코드를   로 감싸준다.   2) CSS로 iframe이 영상 비율에 맞게 나올 수 있도록 한다..video-container { position:relative; height:0; padding-bottom:56.25%;}.video-container iframe { position:absolute; top:0; left:0; width:100%; height:100%;}     반응형 쇼츠여백없이 꽉차게 보일 수 있도록 하기 위해서는 아래처럼 CSS를 조정하면 된다. 1) 먼저 쇼츠 아이프레임 코드를 로 감..

1
더보기
프로필사진

HONG

디지털노마드를 꿈꾸는
UI/UX Designer, Front-end Developer

Contact : heeehong@gmail.com

  • 분류 전체보기
    • 디자인
      • UX·UI
      • html·css
    • 개발
      • js·jquery
      • php
      • sql
      • 카페24
    • tip
    • 리뷰
    • 블로그
    • 글
    • [ 코드 판매 ]

최근글과 인기글

  • 최근글
  • 인기글




티스토리툴바