Youtube動画をPCに埋め込みiPhone(スマホ)で画面サイズに合わせて表示させる
動画は直観的にわかりやすいので取り入れてるサイトも多いですね。
特にYoutubeはその典型でしょう。
サイトに動画を貼り付けると訪問者を足止めする効果があり、
サイト滞在時間が長くなってSEO的にも有利になります。
取り入れ可能な時は積極的に取り入れていきましょう。
今回はそのYoutube動画の『埋め込み』方法、サイズ調整、
スマホ画面幅に合わせて自動でリサイズさせる方法を説明します。
①まずは埋め込みたいYoutube動画上で
右クリック→『埋め込みコードを取得』をクリックします。

②表示されたコードをコピーします。

すると下のような感じでコードがコピーできるので、
これをそのまま動画を表示したいところへペーストします。
たったこれだけです。(テキストモード編集画面で行ってください)
<iframe width="640" height="390" src="//www.youtube.com/embed/fOxX6SSQbHw" frameborder="0" allowfullscreen></iframe>
ただしこのままだとコンテンツエリアの横幅が 640px以下のサイトでは
動画が横に飛び出てしまいます。
そんな時は width="640" height="390" の部分を調整してやりましょう。
たとえば縦横それぞれ 20%ずつ小さくしたいと思ったら
width="512" height="312" といった具合に変えてあげます。
縦横の比率は必ず同じ比率で減らしていきます。
そうしないと一方だけ幅が伸びちゃって見た目がいびつになっちゃいます。
これ以外にも、スタイルシート(styles.css)に加筆で、

.movieinfo iframe {
width: 100%;
}
という風に幅を”100%(最大でも表示枠全体)”としてしまう方法もあります。
こっちの方がラクですかね。
さて上記のYoutube動画をiPhoneで見るとどうなるか。
こう↓なります。

サイズが大きすぎて一部しか表示されてません。
これを元の動画サイズに関係なく
iPhone(スマホ)の横幅いっぱいに全体を表示させてみましょう。
それにはある決まったスタイルをスタイルシートに書き込む必要があります。
その前に、スタイルを設定しやすいように
埋め込み Youtube動画のコードを<div>ブロックで囲っちゃいましょう。
今回は”movieinfo”というクラスを付与してみました。

<div class="movieinfo">
<iframe width="640" height="390" src="//www.youtube.com/embed/fOxX6SSQbHw" frameborder="0" allowfullscreen></iframe>
</div>
この”movieinfo”というクラスにスタイルを設定していきます。

.movieinfo {
position: relative;
padding-top: 56.25%;
padding-bottom:30px;
}
.movieinfo iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
上記の設定は「テンプレート」→「iPhoneサイトスタイルシート編集」のstyles.css に記述します。
一番下の空いてるところにでもペーストしてください。
クラス名は変えても問題ないですがHTML側とCSS側のクラス名を必ず同一にします。
コードの内容については深く考えずにコピーペーストしてください。おそろしく複雑な内容なので多分説明しても理解できない思います。実は私も完全には理解できてません。(-.-)
再度、iPhoneでチェックしてみると、
今度はコチラ↓のようにぴっちりときれいに表示されました。

以上です。