CSS

YouTUBE動画を横並び2列に配置してスマホ対応させたい

ここでは、下記のような条件でページを構成したい場合の事例について見ていきます。

  1. YouTubeを埋め込んでスマホ対応させたい。
  2. 埋め込んだ動画をテキストや画像と横に並べて2列で配置したい。
  3. スマホ表示時は、動画やテキストを1列にしたい。

floatプロパティを使った方法

はじめはfloatプロパティを使って横並びに配置してみます。下記がサンプルです。

ボタンで表示を切り替えてご覧ください。

See the Pen Youtube_side01 by kenichi (@ken81) on CodePen.

レスポンシブ対応できているか確認したい方は、コチラからサンプルをご覧ください。ブラウザの幅を狭めると1カラムになるのが確認できます。

下記がソースコードになります。
HTML

<div class="wrap">
  <div class="float-left" >
    <div class="youtube">
      <iframe src="https://www.youtube.com/embed/WkSRoxzk0EY" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
    </div>
  </div>
  <div class="float-right" >
    <p>こちらの動画では、WordPressプラグインをインストールする方法についてご紹介しています。</p>
    <p>プラグインを有効化したあとは、ダッシュボードの左のメニューや「設定」「ツール」メニューなどで設定を行います。</p>
  </div>
</div>

<div class="wrap">
  <div class="float-left" >
    <img src="https://cotodama.co/wp-content/uploads/2018/08/216468139.jpg">
  </div>
  <div class="float-right" >
    <div class="youtube">
      <iframe src="https://www.youtube.com/embed/ZSO5CEgeITE" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
    </div>
  </div>
</div>

CSS

.wrap{
  margin-bottom: 1.5rem;
}
.youtube {
  position: relative;
  height: 0;
  margin-bottom: 20px;
  padding-bottom: 56.25%;
  overflow: hidden;
}
.youtube iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
}
.wrap img{
  width: 100%;
}

/* ココから下がPC表示(600px以上)のレイアウト */
@media screen and (min-width: 600px) {
  .float-right{
    float: right;
    width: 49.5%;
  }
  .float-left{
    float:left;
    width: 49.5%;
  }
  .wrap:after{
    display: block;
    clear: both;
    content: "";
  }
}

「YouTube + テキスト」「画像 + YouTube」の2段で作成してあります。使用する画像のタテヨコの比率によっては、調整が必要になりますが、基本構成としては上記のやり方で良いと思います。

まず、レスポンシブの仕組み自体が分からない方は、こちらの記事をご参照ください。

アイフレームをスマホ対応させる仕組み、特にpadding-bottom:56.25%;の数字の意味を知りたい方は、こちらの記事が参考になります。


floatプロパティの詳しい説明はこちらに記載してあります。

flexboxを使った方法

もう一つの方法は、flexboxを使った表示方法になります。floatプロパティよりもこちらの方が今後は主流になると思います。

ボタンで表示を切り替えてご覧ください。

See the Pen Youtube_side02 by kenichi (@ken81) on CodePen.

レスポンシブの感じをご覧になりたい方は、コチラをクリックして見てください。

HTML

<div class="container">
  <div class="item" >
    <div class="youtube">
      <iframe src="https://www.youtube.com/embed/WkSRoxzk0EY" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
    </div>
  </div>
  <div class="item" >
    <p>こちらの動画では、WordPressプラグインをインストールする方法についてご紹介しています。</p>
    <p>プラグインを有効化したあとは、ダッシュボードの左のメニューや「設定」「ツール」メニューなどで設定を行います。</p>
  </div>
</div>

<div class="container">
  <div class="item" >
    <img src="https://cotodama.co/wp-content/uploads/2018/08/216468139.jpg">
  </div>
  <div class="item" >
    <div class="youtube">
      <iframe src="https://www.youtube.com/embed/ZSO5CEgeITE" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
    </div>
  </div>
</div>

CSS

.youtube {
  position: relative;
  height: 0;
  margin-bottom: 20px;
  padding-bottom: 56.25%;
  overflow: hidden;
}
.youtube iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
}
.container img{
  max-width: 100%;
}

/* ココから下がPC表示(600px以上)のレイアウト */
@media screen and (min-width: 600px) {
  .container{
    display: flex;
    margin-bottom: 1.5rem;
    justify-content: space-between;
    align-items: flex-start;
  }
  .item{
    flex-basis: 49.5%;
  }
}

これもPC表示の場合のみ、display:flex;を適用させて2列のレイアウトを組んでいます。

flexプロパティの詳しい説明は下記に載っています。

以上が、YouTUBE動画を横並びに配置してスマホ対応させる方法でした。ひとつひとつのプロパティについてお話すると、非常に長くなってしまうので、関連記事の紹介ばかりになってしまいましたが、みなさんの参考になれば幸いです。

最近の記事

  1. CSS

    擬似クラス「:first-child」「:last-child」はどうして効かな…
  2. CSS

    レスポンシブウェブデザインの基本|メディアクリエリの設定
  3. WordPress

    WordPressの立ち上げからサイト構築までの初期手順
  4. CSS

    CSS|中央寄せが効かないときは・・・
  5. CSS

    要素の配置が簡単に決まるFlexboxの使い方
PAGE TOP