web-dev-qa-db-ja.com

divに合うvideo.jsのサイズ

videoに40％幅のdivがあります。 HTMLでは、width="100%" height="auto"は、ビデオを非表示にします。特定のサイズをピクセル単位で設定すると、divに適合しません。 HTMLを空白のままにすると、ビデオのサイズが正しくなくなり、両側に黒いバーが表示されます。

私は他のほとんどの投稿で提案を試しましたが、それを機能させるように思えません。

<div id="box"><video id="trialvid" class="video-js vjs-default-skin"
  controls preload="auto" width="auto" height="auto" poster="images/reelthumbnail.jpg"
  data-setup='{"example_option":true}'>
 <source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4' />
 <source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm' />
 <source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg' />
</video>
</div>
percentagevideo.js
23
user2671810

Videojsのバージョン5では、vjs-16-9vjs-4-3ビデオオブジェクトのクラス、

<video class="video-js vjs-default-skin vjs-16-9" ...>
...
</video>

またはfluidオプションを使用します

<video class="video-js vjs-default-skin" data-setup='{"fluid": true}' ...>
...
</video>

ソース： https://coolestguidesontheplanet.com/videodrome/videojs/

40
adam187

ビデオのデフォルトの絶対配置をオーバーライドするには、い！importantを使用する必要があります。

.video-js {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
}

これが完了すると、ポスター画像はビデオの上ではなく、ビデオの後に表示されるため、次のように修正する必要があります。

.vjs-poster {
    position: absolute !important;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

きれいに表示したいビデオと同じ比率でなければなりません。

17
GentleFish

動画タグのHTMLで、幅と高さを自動に設定します。次に、CSSでビデオIDの幅/高さを100％に設定します。

幅と高さの属性をautoに設定すると、プレーヤーはdivのように機能します。divはデフォルトではサイズがありません。

6
heff

この問題を修正するために使用した方法を次に示します。まず、ビデオオブジェクトのサイズの宣言を削除します。

含む要素の位置プロパティを相対に設定します。

.video_container {
  position: relative;
}

ポスター画像を含む要素に追加し、幅を100％に、高さをautoに設定します。これにより、div自体がポスター画像の高さに合わせて垂直方向にサイズ変更されます（正しく設定した場合は、ビデオと同じサイズにする必要があります）

.video_container img.poster {
  width: 100%;
  height: auto;
  position: relative;
  z-index: 10;
}

.video-jsの位置を絶対に設定し、高さと幅を100％に設定します。これにより、.video-jsは、それ自体を含むdivに適切にスケーリングしているポスター画像の高さと幅にそれ自体をスケーリングします。

.video_container .video-js {
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 110;
}

Zencoderなどのサービスを使用して動画からサムネイルを動的に取得してサムネイルを生成し、ユーザーが動画をアップロードできるようにすると、縦方向に比例して拡大縮小する画像から寸法を取得できるため、動画が常に適切に拡大縮小されます。

4
Stubby

ちょうどこれを見つけました： http://jsbin.com/idinaf/4/edit ここから http://daverupert.com/2012/05/making-video-js-fluid- for-rwd /

これが誰かを助けることを願っています。

編集：IMOは、いくつかの簡単なCSSでこれを試してみてください：

width: 100% !important;
height: auto !important;
2
yogee
  video[poster]{
    object-fit: fill;
}

私のためにやった

0
Dan Ochiana