ここでは、下記のような条件でページを構成したい場合の事例について見ていきます。
- YouTubeを埋め込んでスマホ対応させたい。
- 埋め込んだ動画をテキストや画像と横に並べて２列で配置したい。
- スマホ表示時は、動画やテキストを１列にしたい。
floatプロパティを使った方法
はじめはfloatプロパティを使って横並びに配置してみます。下記がサンプルです。
ボタンで表示を切り替えてご覧ください。
See the Pen Youtube_side01 by kenichi (@ken81) on CodePen.
レスポンシブ対応できているか確認したい方は、コチラからサンプルをご覧ください。ブラウザの幅を狭めると１カラムになるのが確認できます。
下記がソースコードになります。
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」の２段で作成してあります。使用する画像のタテヨコの比率によっては、調整が必要になりますが、基本構成としては上記のやり方で良いと思います。
まず、レスポンシブの仕組み自体が分からない方は、こちらの記事をご参照ください。
アイフレームをスマホ対応させる仕組み、特に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;を適用させて２列のレイアウトを組んでいます。
flexプロパティの詳しい説明は下記に載っています。
以上が、YouTUBE動画を横並びに配置してスマホ対応させる方法でした。ひとつひとつのプロパティについてお話すると、非常に長くなってしまうので、関連記事の紹介ばかりになってしまいましたが、みなさんの参考になれば幸いです。
