あかつきのお宿

youtubeの動画をスマホ用のサイトとかに埋め込むときに、そのまま埋め込むとたぶんサイズがはみ出しちゃうような気がします。スマホを横にすれば大丈夫かもしれないけど。

あるいは強制的にiframeのwidthやheightをちっちゃい値にしちゃえば良いんですけど、まあせっかくなんで、縦にしても横にしてもちょうどいい感じのサイズになるように設定をしてみましょう。

と言っても、CSSでちょこちょこっと制御してやるだけです。

長々と説明してから書くのもあれなんで、とりあえずソースを書いてみますね。

今回はこちらのサイトを参考にさせていただきました。

参考っていうか、例によって丸パクリですけど。例によって。

//HTML
<div class="youtube">
    <iframe width="640" height="480" src="https://www.youtube.com/embed/ARAKK4-Um8k" frameborder="0" allowfullscreen></iframe>
</div>

//CSS
.youtube{
    position:relative;
    padding-bottom: 56.25%;
    padding-top:30px;
    height:0;
    overflow:hidden;
}
.youtube iframe{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}

やることはこれだけです。

youtubeの埋め込みタグを適当なdivで囲って、そこにクラスをつけて、あとはそれにスタイルを当てるだけ。

positionをrelativeにしているのがポイント……なのかな。

まあ、スマホ用に特別な書き方をしているわけではないので、通常のPCのブラウザでも画面を縮めればその幅に合わせてyoutubeの動画のサイズが変わります。

実際にやってみるとこんな感じ。


動画の横幅は640pxだけど、このブログ記事のところの横幅に合わせて、ちょっと縮んでます（430pxくらいかな？）

※ブログのデザインを変更したことによって、記事の横幅が640pxになってしまったため、960pxの動画を埋め込み直しました。padding-bottomの比率も少し変えてあります。でもやり方は一緒なので大丈夫。
（2013/11/12 追記）



別にこの動画を選んだことに深い意味はありません。youtubeのサイトに行ってトップページに出て来た動画を適当に引っこ抜いて来た。

いや、まあ、ダイエットしなきゃと思っている自分はいるんですがね。さすがにだいぶメタボって来たしね。走ると体重いのが分かるしね。

padding-bottomに設定している56.25%ってのは、ウェブ業界における黄金比の数字なんです！！

っていうのは嘘で、単純に動画の縦横の比率の問題ですね。

実際の黄金比は1:1.618くらいだから……まあ、近いっちゃ近い？

動画の縦横比が変動する場合は、javascriptで比率を計算して、padding-bottomをセットしてあげるのが良いかもしれないですね。

ちなみに、今回はyoutubeの動画を例にやりましたが、実際の動作としてはiframeを画面に合わせてリサイズしているわけなので、youtubeは元より、そもそも動画に限らず、他の、例えばgoogle mapの埋め込みなんかでも、同様のことはできます。



簡単レシピなので、スマホに動画を埋め込みたいんだけどいまいちサイズがなぁ……って思ってる人は、ぜひ試してみるよろし？