안녕하세요, 유이 입니다.

이번에는 iframe을 사용하여 YouTube 동영상을 삽입할 때 레이아웃이 매우 쉽습니다. (저는 Vue로 쓰고 있습니다만, 요점은 CSS를 고안할 뿐이므로, HTML/CSS를 사용해 web페이지를 작성하고 있을 때에도 사용할 수 있습니다.)

요전날. ???」라고 하는 것으로, 이번은 레이아웃을 정돈하기로 했습니다.
Vue.js에서 Vuetify를 사용하여 페이지를 만들면 이상하게 상단 공간이 비어서 어려움

우선 YouTube를 iframe으로 퍼가기

먼저 퍼가려는 YouTube 동영상 페이지로 이동합니다.


공유 클릭


퍼가기를 누릅니다.


그러면 위와 같은 임베디드 코드가 나오므로, 그것을 그대로 복사&붙여넣기.

간단하게 이 iframe의 코드를 설명하면, width="560", height="315"라는 부분이 그 이름대로 폭과 높이를 나타냅니다.
다만, 주의가 필요한 것이 이것은 px가 아니고, 종횡의 비율을 나타내고 있으므로 기본적으로 변경해서는 안됩니다.

이번 내가 실패한 원인으로는 이 iframe을 블록으로 둘러싸고, 그것을 각각 그리드 시스템을 이용해 레이아웃을 정돈하고 나서, 그 안 가득 이 동영상이 퍼지면 좋다고 생각해, width="100 %", height="100%"라고 하면, 위의 사진과 같이 옆에 길쭉한 부사이크한 레이아웃이 완성되어 버렸습니다・・・.

iframe을 하나의 박스로 둘러싸고 클래스명을 붙여 relative로부터의 내용을 absolute에

그럼 어떻게 하는가 하면, iframe을 우선은 박스로 둘러쌉니다. 나는 Vue로 썼기 때문에 v-container로 둘러쌌다. 그리고 부모 클래스로 relative를 지정한 다음 그 안(즉 iframe 부분)을 absolute로 이동시킵니다.

실제 코드를 살펴보자.

YouTube1.vue

<template>
    <v-container class="responsive-style">
        <iframe
        width="560"
        height="315"
        src="https://www.youtube.com/embed/xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
        frameborder="0"
        allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
        ></iframe>
    </v-container>
</template>

<style lang="scss" scoped>
.responsive-style{
    position:relative;
    width:100%;
    height:0;
    padding-top:50%;
}
.responsive-style iframe{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}
</style>

먼저 부모 요소로 상자의 너비를 최대화합니다.
주의가 필요한 것이 여기에서는 높이는 0으로 하는 것입니다.
그 대신 padding을 넣어 줄 것입니다.
이 padding에 높이로 하고 싶은 수치를 넣습니다.
여기서 포인트는 px로 지정하는 것이 아니라 %로 지정한다는 것입니다.
이렇게 하면 PC에서도 스마트폰에서도 같은 비율로 표시할 수 있습니다. (후술합니다만, PC에서는 2 컬럼, 스마트폰에서는 1 컬럼으로 하고 싶은 경우는, 그리드 시스템을 이용해 표시합니다.)

그리고, 그 부모 요소의 padding이 내용(iframe)이 들어가는 부분이 되기 때문에, 여분의 틈을 제로로 해 (top:0;, left:0; 의 부분) 종횡 가득 넓힙니다.

이것으로 간단하게 레이아웃이 갖추어지므로 꼭 시험해 주세요!

덤

위의 방법을 사용하면 장치별로 열 수를 구분할 수 없습니다.
그래서, PC에서는 2컬럼, 스마트폰에서는 1컬럼으로 하고 싶은 경우는, 또한 상기의 부모 요소를 큰 테두리로 만들어, 그리드 시스템으로 표현합니다.

※이번, 여러 사정으로 왼쪽과 오른쪽의 YouTube 부분을 각각 다른 컴퍼넌트로 하고 있습니다. 아래의 느낌.

Home.vue

<template>
  <v-app>
    <v-container class="container-style">
      <v-row class="youtube-class">
        <v-col cols=12 sm=12 md=6>
          <YouTube1/>
        </v-col>
        <v-col cols=12 sm=12 md=6>
          <YouTube2/>
        </v-col>
      </v-row>
      <!--省略-->
    </v-container>
  </v-app>
</template>

이렇게 하면 무사한 PC 화면에서는 2컬럼으로, 스마트폰에서는 1컬럼으로 YouTube를 삽입할 수 있었습니다!