30

<video>何もトリミングされないように、ウィンドウの幅と高さに合わせてサイズを変更する絶対配置要素に HTML5 を含めることは可能ですか? 私が見た多くのソリューションは、私が持っていないタグに依存しているように見え<iframe>ます。または、幅に基づいてサイズを変更するだけです (これは既に実行できます)。

基本的に、ビデオをできるだけ大きくする方法を探していますが、ウィンドウのサイズが変更された場合でもトリミングされないようにする方法を探しています.IE9でも. (注: ビデオは比率を維持する必要があるため、黒いバーがあっても問題ありません。)

これは私がこれまでに試したことです。

/*CSS*/

#player-overlay {
  position: absolute;
  display: none;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000        
    z-index:999;
}
<!--HTML-->

<div id="player-overlay">
  <video width="100%" video="100%" style="width:100%, height:100%">
    <source src="../static/video/10s.mp4" />
    <source src="../static/video/10s.webm" type='video/webm; codecs="vp8, vorbis"' />
    <source src="../static/video/10s.ogv" type='video/ogg; codecs="theora, vorbis"' />
  </video>    
</div>

代わりに、JS ソリューションを試して作成する必要があるようです。

4

4 に答える 4

0

レスポンシブビデオで何か他のものを見つけようとしているときに、この答えに出くわしました. 同様のコードを使用してレスポンシブ ビデオ要素を実装しました。

このリンクは、いくつかのことを理解するのに役立つかもしれません 高さは幅に等しい Pure CSS

コードは次のようになります。

#player-overlay {
  position: relative;

  &:before {
    content:'';
    display: block;
    padding-top: 50%;  // 50% equals a 2:1 ratio. you can read more about
                       // the ratios in the link
  }
}

video {
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
}

before 疑似要素の padding-top を変更するだけで比率を変更できます。

于 2017-09-19T21:31:41.620 に答える