css - レスポンシブ YouTube ビデオ

Question

多くの場所で、ビデオを責任あるものにするこのコードを見つけましたが、うまくいきません。

<div id='wrapp'>
<iframe id='player' src="//www.youtube.com/embed/VWSL2SykovA?rel=0"></iframe>
</div>

CSS

#wrapp {
    position: relative;
    padding-bottom:75%;  // video is 4:3 aspect ratio
    padding-top: 25px;
    height: 0;
    width:70%;
    margin:15px auto;
    z-index:2;
    border:medium ridge #b30000;
    border-radius:9px;
}
#player{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

ビデオ、つまり iframe が高すぎます。フィドル
はこちら

Answer 1

あなたのプロポーションは間違っているようです。

Zurb Foundationによって提案された CSS 設定を試してください。

#wrapp {
  height: 0;
  margin-bottom: 16px;
  margin-left: 30px;
  overflow: hidden;
  padding-bottom: 67.5%;
  padding-top: 25px;
  position: relative;
}

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

jsFiddled here

これは nhZBV/4 のスクリーン キャプチャです。