한 번에 끝내는 파이썬 웹 개발 초격차 패키지 107일차

웹 & 프론트엔드 기본

GitHub 예제

Youtube

---

Youtube

- Youtube 영상은 반응형에 맞게 제작되어야 함

- Youtube 영상의 비율은 16:9

- Bootstrap에서는 Youtube 기능이 16:9 자동으로 만들어주는 기능을 제공

- Bootstrap > Header > Docs > Helpers > Ratio

 

Ratios

- 생성된 유사 요소를 사용하여 선택한 가로 세로 비율을 유지

- 부모 폭에 따라 비디오나 슬라이드쇼 임베드를 반응적으로 처리하기에 적합

 

index.html

<!-- 중략 -->

  <!-- YOUTUBE -->
  <section class="youtube">
    <div class="container">
      <img class="astronaut" src="./images/hero-astronaut.svg" alt="Astronaut">
      <div class="ratio ratio-16x9">
        <iframe src="https://www.youtube.com/embed/etMvd9IKPH4" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
      </div>
    </div>
  </section>
  
<!-- 중략 -->

iframe src = 영상 주소

main.css

/* 중략 */

section.youtube .container {
    padding-top: 90px;
    padding-bottom: 70px;
    position: relative;
}
section.youtube img.astronaut {
    width: 480px;
    position: absolute;
    top: -420px;
    right: 0;
}
section.youtube .ratio{
    border-radius: 10px;
    overflow: hidden;
    background-color: black;
}

youtube

 

---

Youtube 삽입에 대해서 학습해보는 시간을 가졌다. 이번 코드에는 딱히 정리해야 할 부분이 그리 많지 않았다. 그럼에도 우주비행사가 출력이 안 되길래 조금 헤맸던 시간이었다. 그 이유는 오타였던 한 줄 한 줄 유심히 체크를 못 했다는 부분이 안타까울 뿐이다. 소스 코드가 아직 그리 큰 것도 아닌데 여기서 이렇게 오타로 인해 시간을 잡아먹는 모습이... 아직도 코딩이란 너무 어렵다는 것이다.

107일 차는 여기서 마무리하고자 합니다.

패스트캠퍼스 링크 :https://bit.ly/37BpX

패스트캠퍼스 [직장인 실무교육]