Blue Point Solutions

YouTubeビデオの幅をFluidにする

この記事は、http://css-tricks.com/ の Chris Coyier の許可を得て、翻訳しています。一部変更して翻訳している部分もある場合がります。オリジナルの記事はここよりご覧いただけます。

こちらのアーティクルは2010年9月2日に書かれたものを加筆修正致しました。異なるアスペクト比のYouTubeビデオへの対処方法、インラインフレームを埋め込む新しい方法、より効果的なスクリプトの書き方などについて触れています。
全てのビデオをカバーするためにこのアイデアを考えてみました。

画像（修正あり）
YouTubeが現在提供している埋め込みコードは極めてシンプルなインラインフレームです。サンプルはこちらです：

<iframe width="1280" height="750" src="http://www.youtube.com/embed/fXm9EwzSjO4?rel=0&amp;hd=1" frameborder="0" allowfullscreen></iframe>

上記のYouTubeのサンプルを含み、インラインフレームには親ページからはサイズを測定することが出来ない外部コンテンツが含まれています。（例えば画像などの）コンテンツの中身によってインラインフレームのサイズが決まるわけではないので、インラインフレームを記述する上で高さと幅の指定は必須項目です。けれど要素に固定の高さと幅を設定してしまうと、流動的であったりフレキシブルなタイプのデザインに問題が生じます。もし親ページ内でのエリアが実際のビデオ幅より狭く縮小されてしまったら、ビデオ自体がそれに合わせて縮小すると言うことはなく、枠からはみ出してしまいます。

先日Web Designer Wallというサイトで、この流動的なビデオへの対処方法に関して記事が公開されていました。このアイデアは元々ティエリ・コブレンツが提唱していたもので、彼個人のWEBサイトやA List Apartにも掲載されています。
私はこのアイディアが非常に気に入っています。巧妙で純粋なCSSが使用されているし、きっちり与えられた役割を果たしています。しかしYouTubeビデオに対する解決策には、問題点が2点ほど思いつきます。
ビデオのアスペクト比が事前に定義されています。padding-bottom: 56.25%と言う巧妙な記述は、アスペクト比が１６：９のビデオにはうまく作用するのですが、全てのビデオをカバーしてはくれません。
追加のマークアップを記述する必要があります。全てのビデオは別のHTML要素でラッピングされていなければなりません。<figure>などを使うことには納得出来るのでセマンティック的ではないとまでは言い切りませんが、余計な仕事が増えると言うことは確実でしょう。
もし上記2つのいずれも気にならないのであれば、どちらかを使用すればよいのでここで解決です。けれどもし気になってしまうのであれば、JavaScriptに出動願いましょう。

jQueryを使ってみる

このjQueryでの解決方法で声を大にして言いたいのは、ただYouTubeの埋め込みコードを貼り付けたいページにコピペすれば済んでしまうと言うことです。アスペクト比など何も気にしなくていいのです。マークアップの追加記述も必要ありません。

ページ上の全てのビデオのアスペクト比を調べて記録する。

ウィンドウサイズが変更される場合は、変更後のページでのコンテンツサイズを確認し、変更後のサイズをオリジナルのアスペクト比を基に定める。

実際のスクリプトはこのようになります：

// By Chris Coyier & tweaked by Mathias Bynens
$(function() {
        // Find all YouTube videos
        var $allVideos = $("iframe[src^='http://www.youtube.com']"),
            // The element that is fluid width
            $fluidEl = $("body");
        // Figure out and save aspect ratio for each video
        $allVideos.each(function() {
                $(this)
                        .data('aspectRatio', this.height / this.width)
                        // and remove the hard coded width/height
                        .removeAttr('height')
                        .removeAttr('width');
        });
        // When the window is resized
        // (You'll probably want to debounce this)
        $(window).resize(function() {
                var newWidth = $fluidEl.width();
                // Resize all videos according to their own aspect ratio
                $allVideos.each(function() {
                        var $el = $(this);
                        $el
                                .width(newWidth)
                                .height(newWidth * $el.data('aspectRatio'));
                });
        // Kick off one resize to fix all videos on page load
        }).resize();
});

このスクリプトをご自身のサイトで使用する際にやらなければならないことはただ1つ、\$fluidEl = \$("body");ラインの変更です。 ("body")セレクターをコンテンツの親になっている流動幅な要素に変更すればよいだけです。もし要素が<section id="main-content"></section>などと記述されていたら、おそらくその"#main-content"でしょうね。　
window.resizeに関しての提唱：ウインドウのリサイズイベント時にファンクションを実行させる際には、気を付けておくべきことがあります。その特定のイベントはブラウザによって異なる頻度で実行されます。WebKitはリサイズの最中に何千回何万回はたまた何百万回と実行してくるので、もし同時に何か重い作業をさせるとページパフォーマンスに支障をきたすことがあります。リサイズを「デバウンス」する対処方法として、ポール・アイリッシュさんのプラグインのご使用を強くお勧めします。

デモ
ファイルダウンロード

以前のYouTube埋め込み方法（object要素やembed要素）をカバーするために、ダウンロードのデータ内にアーティクル更新前の古いバージョンも残しておきますね。