web-dev-qa-db-ja.com

ページのiframe全幅でYouTubeビデオを表示する

YouTubeのiframeを使用してサイトにビデオを入れましたが、iframeは全幅（100%）ビデオはフレーム内で非常に小さい（高さ）です。コンテナの幅に合わせるにはどうすればよいですか？

コード：

<iframe width="100%" height="100%" src="https://www.youtube.com/embed/5m_ZUQTW13I" frameborder="0" allowfullscreen></iframe>

スクリーンショットを見る

enter image description here

htmlcssiframeyoutube
18
user3005003

You Tube Videoを全幅にし、高さを保持（および応答性を維持）するには、次のセットアップを使用できます。

ビデオ付きのHTML

<div class="videoWrapper">
    <!-- Copy & Pasted from YouTube -->
    <iframe width="560" height="349" src="http://www.youtube.com/embed/n_dZNLr2cME?rel=0&hd=1" frameborder="0" allowfullscreen></iframe>
</div>

CSS

.videoWrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    padding-top: 25px;
    height: 0;
}
.videoWrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
49
Web Develop Wolf

問題は、iframeとビデオが画像のように拡大縮小できないことです。高さをデフォルトのままにしておくと、アスペクト比に基づいて比例的に正しい高さを取得します。

これに対する解決策は、ビデオのネイティブの幅/高さを把握し、わずかな計算を行って、100％の画面幅で高さを把握することです。 1920x1080と仮定すると、ビューポート幅（vw）を使用してこのようなことができます。文字通り画面いっぱいにしたくない場合は、100vwをより適切なものに減らすことができます。

iframe{
 width: 100vw
 height: calc(100vw/1.77);
}
12
will