ウィンドウの横幅に合わせてYouTubeの動画を載せる方法

HTMLやCSSを用いホームページなどを制作する際、
動画をウィンドウの横幅に合わせて（縦横比の維持のため、縦幅は適切な値に自動でリサイズします）表示させます。

今回はYouTube上にアップロードされている動画を例にとっておりますが、その他の手法で動画を表示させる場合も同様の手順にて実装できます。

まず、YouTubeの動画から取得してきたHTML用のリンク（埋め込みコード）がこちらです。

<iframe width="560" height="315" src="https://www.youtube.com/embed/~~~~~~~~" frameborder="0" allowfullscreen></iframe>

そして、HTMLの方では下記のように動画の埋め込みコードをで囲みます。
これは、CSSにてスタイルをあてるために行なっています。

<div id="video">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/~~~~~~~~" frameborder="0" allowfullscreen></iframe>
</div>

次に、CSSでは下記のように記述します。

#video {
    position: relative;
    padding-top: 56.25%;
}

#video iframe{
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
}

前者は<div> ~~~~~~ </div>に対して、後者は中身にある埋め込みコードに対してスタイルをあてています。

ちなみにYouTubeの場合、以下のように動画のURLの直後にオプションをつけるとスタイリッシュな感じになります。

?rel=0&autoplay=1&controls=0&showinfo=0&start=20

それぞれのオプションは、

rel=0 //動画が終了後、関連動画を表示しない
autoplay=1 //動画を自動で再生する
controls=0 //プレーヤーのスクロールバーを表示しない
showinfo=0 //動画のタイトルやプレーヤーの操作を表示しない
start=100 //動画を100秒目から再生する

以上です。

当記事が、どなたかの一助となれば幸いです。