[解決済み] YouTubeの動画をレスポンシブな幅に縮小する

質問

当社のウェブサイトに YouTube の動画を埋め込んでいますが、タブレットや携帯電話のサイズに画面を縮小すると、幅 560px あたりで縮小が止まってしまいます。これは YouTube 動画の標準なのでしょうか、それとももっと小さくするためにコードに追加できることがあるのでしょうか。

どのように解決するのですか？

YouTubeの動画をCSSでレスポンシブにすることができます。iframe をクラス "videowrapper" の div で囲み、以下のスタイルを適用してください。

.videowrapper {
    float: none;
    clear: both;
    width: 100%;
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 25px;
    height: 0;
}
.videowrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.videowrapper div はレスポンシブ要素内に配置する必要があります。.videowrapper のパディングは、動画が折りたたまれないようにするために必要です。レイアウトに応じて数値を調整する必要があるかもしれません。