Youtube ビデオを responsive にする方法

　先週、モバイルの WebView を使って、文章を表示する機能をアプリに追加されました。エディターから一つの要求は youtube のビデオを表示したいです。基本的に文章は Responsive をしているので、コンテンツは問題なく各種のモバイルスクリーンサイズが適応できますが、youtube ビデオは iframe の中にあるし、youtube の JavaScript ライブラリで作成されますので、responsive にするには with と height を 16:9 で固定する必要があります。ただ、iframe のサイズを変更するには JavaScript 以外だったら、すこし難しいです。特に、JavaScript を web page に使いたくない時があります。
　調べて見たら、css- trick からcss だけで youtube ビデオを responsive にする方法がありました。まず、ifarme にラッパーに置きます。html は以下の通り：
<div class="video-wrapper">
    <iframe width="480" height="270" src="http://www.youtube.com/embed/{youtube-video-id}?rel=0&hd=1" frameborder="0" allowfullscreen></iframe>
</div>

そのあと、css:
.video-wrapper {
position: relative;
padding-bottom: 56.25%;   /* 16:9 */
padding-top: 25px;
height: 0;
}
.video-wrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

ここのトリックは padding-bottom です。パーセンテージにすると、width の長さになります。ここ 56.25% を設定すると、width とのアスペクト比は 16:9 になります。

　次、iframe を 100%, 100%, position を absolute に設定したら、親要素の中にフル表示されます。

　参考にしたページは

　https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php

　css でいろいろできるなと。例えば、これ：

　https://pattle.github.io/simpsons-in-css/

　それでは。

Android Media Query サイズ再考

　先週、Android バージョンのアプリがリリースする予定でしたが、横向きを追加すべきとの観点が顧客から出てきました。phone サイズだと、横向きがの高さが本当に小さいから、それに加えて私たちのアプリにヘッダとフッターがあるから、いっそう立て幅が小さくなります。。。
　ただ、ユーザがより多くのコンテンツを読みたいことが予想できますので、今月中のリリースに向けて、着々アプリの修正が進んでいます。その中に、私メインで作った天気ページは縦方向しか対応してないため、横になると、字がかぶったり、位置がずれたりしています。対応が必要です。
　私たちの Phone サイズテスト機は Nexus 5となっています。実際使って見ると、なんと、WebView の横幅は 800 px もあります。。。一般的な Tablet は 1024 となっていますが、接近していますね。。。何とも言えないけど。。。
　それで、480px 以下だと、phone レイアウトを表示するとか、下記の一般的な表があります。
    Phone width =< 480px,   Tablet 480px < width =< 1024px,  Desktop > 1024px
　iPhone 5や、Nexus 5がリリースされると、上記のサイズは実際とあわないことになりました。
　それで、多分上記の分け方に問題があるような気がしています。なぜなら、Android ではタブレットのサイズが違いすぎるためです。今まで見たアンドロイドタブレットの中に、1024x360 のものもあります。縦になると、実は Phone と変わらない横幅です。
　多分、これから開発するとき、Responsive デザインを実装する時、Phone サイズなどの分類を考えずに、直接デバイスのサイズを考えたほうが良さそうです。
　まず、>= 1024px、これは大きいサイズのタブレットとデスクトップ。
　次 < 1024px、これは普通のタブレットサイズ。
　さらに、< 480px、これは小さいデバイス。
　これで、まず全部の要素をできるだけパーセンティジで定義して、全部の要素をブラウザリサイズするとき、隠さないようにします。次、画面のサイズにあわせて、Media Query を使って、個別要素のサイズを調整します。
　注意点としては、位置が Absolute の要素に対して、たまに他の要素とかぶったりします。どの親と一緒かをはっきり設定しなければなりません。BEM、スマックスなどの Methodologies を参考にすれば、面白いでしょう。
　もし、CSS では難しいであれば、背景画像を使いましょう。小さい画像なら、base64 でエンコードして、CSS に入れれば、余計な HTTP Request なしで済むから、便利でしょう。
　ほんの小さい考えですが、デザイナにインプットして、使いやすいアプリになりますように。
　それでは。