안녕하세요! 안녕하세요! 도내 모소의 웹계 기업에 근무하는 YouTube를 좋아하는 엔지니어입니다.
제목대로, 첫 투고하면서, 엔지니어면서, 디자인 다가오는 화제에 돌진합니다!

그런데, 지금 가장 뜨거운 (자론) 프런트 엔드 라이브러리인 Vue.js입니다만,
취미로 1부터 무언가를 만들려고 하면 엔지니어의 자신은 아무래도 디자인의 벽에 부딪칩니다. . .
(css 캉나이)

그런 가운데, 여러가지 UI라이브러리의 조사를 하고 있으면, Vuetify라고 하는 라이브러리를 만나고, 고뇨고뇨하는 가운데 지견이 조금 붙었으므로 옷자락 나눕니다!

Vuetify 개요, 소개

제목에도 나와 있는 「Vuetify」의 개요입니다만, 묵묵히 말하면 Vue.js에서 이용할 수 있는 디자인의 부품(UI컴포넌트)을 많이 제공해 주는 라이브러리입니다!

도입과 쓰기하면서, Vue.js&Vuetify의 자세한 도입 방법에 대해서는, 공식 사이트에 맡깁니다(웃음)
하기 공식 사이트의 도입 방법 페이지 등 참고해 주세요 mm
htps : // ゔ에치 fyjs. 코 m / 자 / 껄껄 g-s r d / 구이 ck-s rt /

Vue 프로젝트 작성 후, 기본적으로는 아래 명령만으로 이번에 필요한 ver2.0 이상을 도입할 수 있을까 생각합니다.

$ vue add vuetify

1. 그리드 컴포넌트 생성

배포가 완료되면 먼저 Vuetify 2.0 이후 도입된 그리드 시스템을 활용하여 반응형 카드 요소를 몇 개 만듭니다. 결국, ↓ v-card 위에 YouTube를 올려 반응형 디자인을 실현합니다.
그리드 시스템

app.vue

<template>
  <v-app>
    <v-container fluid class="red darken-4">
      <v-row justify="center">
        <v-col v-for="n of 8" :key="n" cols=12 sm=10 md=6 lg=6 xl=3>
          <v-card height=400>
          </v-card>
        </v-col>
      </v-row>
    </v-container>
  </v-app>
</template>

여기에서 개인 포인트는 다음과 같습니다!

YouTube는 비교적 너비가 많으므로 v-container에 fluid를 지정하여 화면 가득 표시.

요소를 중간에 넣기 위해 v-row 에 justify=center 를 지정

v-cols 에서의 화면 분할수와 v-card 의 높이는 좋아합니다만, 아래 그림이 분할수의 참고가 될까 생각합니다.

화면을 보면이 느낌

$ npm run serve

2. YouTube 임베디드용 iframe 획득

분명 아시는 분도 많다고 생각합니다만, 일단 YouTube의 포함 태그 취득 방법에 대해 기재합니다!

1. 올리고 싶은 YouTube 동영상의 페이지에 액세스해 「공유」버튼을 눌러(교토 가고 싶다)

2. 표시된 팝업의 "포함"

3. 우측 하단 「복사」를 누르면, 임베디드용 iframe 태그를 취득할 수 있습니다.

3.v-card에 YouTube를 올리기

1.에서 구현한 v-card 에 2.에서 얻은 iframe 태그를 포함합니다.
여기서 v-card 전체에 YouTube를 표시하려면 iframe에서 height 및 width를 100%로 설정합니다.

app.vue

<template>
  <v-app>
    <v-container fluid class="red darken-4">
      <v-row justify="center">
        <v-col v-for="n of 8" :key="n" cols=12 sm=10 md=6 lg=6 xl=3>
          <v-card height=400 class="red darken-4">
            <iframe
              height="100%"
              width="100%"
              src="https://www.youtube.com/embed/1GS6RG4i8YI"
              frameborder="0"
              allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
              allowfullscreen
            ></iframe>
          </v-card>
        </v-col>
      </v-row>
    </v-container>
  </v-app>
</template>

구현 후 화면을 다시 표시하면 ...

$ npm run serve

반응형!(^○^)!
이상