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を乗せてレスポンシブデザインを実現します。
[グリッドシステム](https://vuetifyjs.com/ja/components/grids/)

```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`の高さはお好みですが、下図が分割数の参考になるかと思います。
![https___qiita-image-store.s3.ap-northeast-1.amazonaws.com_0_483292_2429a08b-c09d-3c5e-dea8-bac66fb8c7b4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/638730/babfc099-0ea9-b24f-9cc7-18a6d2b1bac8.png)
画面を表示するとこんな感じ

```
$ npm run serve
```
![respo-koyo.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/638730/b3f37b20-e244-8985-53ff-ee7d3ca062b4.gif)


# 2.YouTube埋め込み用iframe取得
きっとご存知の方も多いと思いますが、一応YouTubeの埋め込みタグ取得方法について記載します！

1.載せたいYouTube動画のページにアクセスして「共有」ボタンを押下(京都行きたい)
<img width="1038" alt="スクリーンショット 2020-06-06 4.14.51.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/638730/64971fbc-097b-0f74-45cd-10b86ef4ede7.png">
2.表示されたポップアップ内の「埋め込む」をポチッ
<img width="672" alt="スクリーンショット 2020-06-06 4.19.24.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/638730/be9c10eb-fc9f-2373-1f6a-bf561f4c329d.png">
3.右下「コピー」を押下すると、埋め込み用`iframe`タグが取得できます。
<img width="1439" alt="スクリーンショット 2020-06-06 5.34.53.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/638730/af4499f5-f74c-bfe3-0c21-e9acaf5ff888.png">

# 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
```
![koyo-gif-fin.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/638730/681d1802-e274-855b-37a1-4d2785d8c1ee.gif)

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