オリンピックのネタばっかりじゃなくて、たまにはWeb制作者らしいことを書かないと、このままではゴシップ記者の扱いを受けそうで焦っている日々です。
さて今日はYouTubeやVineの動画をブログに埋め込むときに使う、iflameの問題に関することです。YouTubeなどで発行されている埋め込みコードをそのまま使うと、スマホで見た際に問題がおきます。そこであるコードを書いてやると、それが解決するわけです。一般的に有名なCSSコードが【魔法1】なのですが、これでがうまくいかない場合があります。その時に使える【魔法2】なんです。
ここまで読むと、それっぽい記事にみえませんか？（笑）
YouTubeのコードをそのまま貼り付けた場合
YouTubeの共有から埋め込みコードをコピペして、ブログに簡単に貼り付けることができます。ただその場合スマホでみると、下記のような現象になりませんか？
widthが560pxとかで指定してあるので、こういう表示になるのは当たり前ですね。
最近の無料ブローグサービスやWordpressのテーマなどによっては、この問題を解消しているものもあります。ちなみにこのブログで使っているStinger3も初めから対応してます。つまりブログの記事にYouTubeのコードをそのまま貼るだけで、レスポンシブに対応してくれるわけです。
しかしそうではないブログでは、どうしてもコードを書いてやらないといけない。そこで登場するのが下記の魔法たちというわけです。
最も有名な【魔法1】のコード
Google検索すると、このコードを紹介しているブログが山ほど出てくるので、詳しくはそちらをごらんください。
簡単に解説をすると、下記のようにCSSを作ってやっておきます。
【魔法1】のCSSコード
.mahou1 {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
margin-top: 20px;
margin-bottom: 20px;
}
.mahou1 iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
そして埋め込みコードをこの中に入れてやる。
</pre> <div class="mahou1"><iframe src="//www.youtube.com/embed/biiWWslkTRs" height="315" width="560" allowfullscreen="" frameborder="0"></iframe></div> <pre>
これでPCでもスマホでもYouTubeなどが横幅ぴったりにハマるというもんです。ちなみに【魔法1】の方法でVineを埋め込んでスマホでみると。
このようになります。高さが指定されて、動画の両サイドに黒帯ができます。スマホで見る場合、この画面では再生されずに別画面で再生するので、Vineの動画がこのような表示になっても、格段問題はありません。
しかし先日【魔法1】で起きた現象なんですが。PCのVine画面も上記の写真と同じように表示されるんですが、この黒帯の部分に何かのバグのような画面が登場してきました。（スクショがあればいいんですが、その状態に戻すのがめんどくさいので、文章でお許しください。）さすがにバグのような状態のまま妥協するわけにいかず、別の方法を考えていたら次の【魔法2】を見つけたわけです。
【魔法1】で問題が起きた方は【魔法2】をおすすめ
先にコードを書いておきます。
【魔法2】のCSSコード
.mahou2 {
position: relative;
padding-bottom: 100%;
padding-top: 30px;
height: 0;
overflow: hidden;
margin-top: 20px;
margin-bottom: 20px;
}
.mahou2 iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
【魔法1】と【魔法2】と違いって、padding-bottomが56.25%か100%かだけの違いなんですよね。これにするだけでずいぶん違う表示になります。
ちなみに【魔法2】をつかってVine動画を埋め込んでスマホで確認すると。
先ほどの【魔法1】とずいぶん違いますよね。Vineのような正方形の動画もきっちり表示してくれるようになります。しかしPCの画面も横幅100%になってしまうので、例えばブログの本文の部分が640pxだと、640px640pxの巨大な正方形になるというわけです。
どちらがいいかはご自分のサイトの状況に合わせることをおすすめします。
ちなみに、YouTubeの動画は【魔法1】【魔法2】ともに表示は変わりません。