ここでは、下記のような条件でページを構成したい場合の事例について見ていきます。
- YouTubeを埋め込んでスマホ対応させたい。
- 埋め込んだ動画をテキストや画像と横に並べて２列で配置したい。
- スマホ表示時は、動画やテキストを１列にしたい。
floatプロパティを使った方法
はじめはfloatプロパティを使って横並びに配置してみます。下記がサンプルです。
ボタンで表示を切り替えてご覧ください。
レスポンシブ対応できているか確認したい方は、コチラからサンプルをご覧ください。ブラウザの幅を狭めると１カラムになるのが確認できます。
下記がソースコードになります。
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" > |
</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」の２段で作成してあります。使用する画像のタテヨコの比率によっては、調整が必要になりますが、基本構成としては上記のやり方で良いと思います。
まず、レスポンシブの仕組み自体が分からない方は、こちらの記事をご参照ください。
訪問者が利用する端末やブラウザのサイズによってページのデザインが変わる仕組みのことを「レスポンシブ」と言います。レスポンシブウェブデザインでは、ブラウザのサイズ（横幅）に応じて、読み込むスタイルシートが切り替わるメディアクエリ(Media Queries)とい...
アイフレームをスマホ対応させる仕組み、特にpadding-bottom:56.25%;の数字の意味を知りたい方は、こちらの記事が参考になります。
ここではiframeのレスポンシブ対応の方法についてお話していきます。iframeは、GoogleマップやYoutubeの埋め込み用のコードを使う場合でも対応が必要になります。レスポンシブは理解するのが難しい部分がありますが、とりあえずコードだけでもコピペして...
ここでは、YouTube動画を埋め込んでスマホ対応させる方法についてお話します。
YouTube動画をページに埋め込む方法
動画を埋め込むこと自体はとても簡単にできますので、下記の手順の通りにやってみてください。
埋め込みたいYouTub...
floatプロパティの詳しい説明はこちらに記載してあります。
ここでは、floatプロパティの使い方についてお話していきます。このページを読み終わるころには、写真とテキストを横に配置したこんなレイアウトが完成できるようになります。
こんな形でテキストと画像を横並び...
flexboxを使った方法
もう一つの方法は、flexboxを使った表示方法になります。floatプロパティよりもこちらの方が今後は主流になると思います。
ボタンで表示を切り替えてご覧ください。
レスポンシブの感じをご覧になりたい方は、コチラをクリックして見てください。
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" > |
</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プロパティの詳しい説明は下記に載っています。
Flexboxというのはボックスの配置を簡単に設定するための新しいレイアウト機能です。ここでは、Flexboxの使い方についてお話していきます。Flexboxを初めて知った方にとっては、少しとっつきにくさを感じる部分もあるかもしれませんがとても便利なプロパティ...
以上が、YouTUBE動画を横並びに配置してスマホ対応させる方法でした。ひとつひとつのプロパティについてお話すると、非常に長くなってしまうので、関連記事の紹介ばかりになってしまいましたが、みなさんの参考になれば幸いです。
