VuetifyでYouTubeをレスポンシブデザイン化！

こんにちは！こんばんは！都内某所のWeb系企業に勤めるYouTube大好きエンジニアです。
題名の通り、初投稿ながら、エンジニアながら、デザイン寄りの話題に突き進みます！

さて、今一番熱い(自論)フロントエンドライブラリなVue.jsですが、
趣味で1から何か作ろうとすると、エンジニアの自分はどうしてもデザインの壁にぶち当たります。。。
(cssﾜｶﾝﾅｰｲ)

そんな中、色々UIライブラリの調査をしていたら、Vuetifyというライブラリに出会して、ゴニョゴニョする中で知見がチョッとついたので御裾分けします！

Vuetifyの概要、導入

題名にも出ている「Vuetify」の概要ですが、ざっくり話すとVue.jsで利用できるデザインの部品(UIコンポーネント)を数多く提供してくれているライブラリです！

導入と書きつつ、Vue.js&Vuetifyの詳しい導入方法については、公式サイトにお任せします(笑)
下記公式サイトの導入方法ページ等参考にしてくださいmm
https://vuetifyjs.com/ja/getting-started/quick-start/

Vueプロジェクト作成後、基本的には下記コマンドのみで今回必要なver2.0以降を導入できるかと思います。

$ vue add vuetify

1.グリッドコンポーネント作成

導入ができたら、まず最初にVuetify2.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

レスポンシブ!(^○^)!
以上