【超簡単】iframeを使ってYouTubeを埋め込んだ場合に簡単にレイアウトを整える方法

こんにちは、Yuiです。

今回はiframeを使ってYouTube動画を埋め込んだ際にものすごく簡単にレイアウトを整える方法をお伝えします。（私はVueで書いてますが、要はCSSを工夫するだけなので、HTML/CSSを使ってwebページを作成しているときにも使えます。）

先日Vue.jsでVuetifyを使ってページを作成してたら変に上部のスペースが空いて困った件という記事を書いたのですが、その最後の完成形として上げていたこちらの写真、確かにpaddingは消えていますが、「え、Youtube画像細長すぎない？？？バランス悪すぎない？？？」ということで、今回はレイアウトを整えることにしました。

まずは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を埋め込むことができました！