0

次の場所にサイトがあります。

http://www.summerserver.com/video

ビデオには次のコードベースを使用しています。

http://syddev.com/jquery.videoBG/

私が抱えている問題は次のとおりです。

ビデオは div に表示されますが、ユーザーの解像度/画面の違いにより、画面ごとに異なって見えます。幅100%にしたい。その部分は機能します。問題は、ビデオ ストレッチングのアンカー ポイントが左上隅にあるように見えることです。左下隅にお願いします。ユーザー画面の解像度が高いほど、ビデオの下部が切り取られます。ビデオの下部ではなく、上部をトリミングしたいと思います。

以下は、私が使用している .js です。

//videoDemo 
$('#div_demo').videoBG({
    mp4:'_assets/vid/index_video.mp4',
    ogv:'_assets/vid/index_video.ogv',
    webm:'_assets/vid/index_video.webm',
    poster:'_assets/img/index_video.jpg',
    scale:true,
    zIndex:0
});

別のアンカーポイントを使用するように指示する方法がわかりません（またはこれが可能かどうか）。ビデオ コンテンツの最良の部分は下の方にあります。上は空のものだけなので....これを達成する方法について何か考えはありますか?

ありがとうございました！

4

1 に答える 1

0

まず、プロパティ width: "100%" を videoGB 呼び出しに追加する必要があります。

//videoDemo 
$('#div_demo').videoBG({
    mp4:'_assets/vid/index_video.mp4',
    ogv:'_assets/vid/index_video.ogv',
    webm:'_assets/vid/index_video.webm',
    poster:'_assets/img/index_video.jpg',
    scale:true,
    zIndex:0,
    width: "100%"
});

一番下の問題については、videogb.js に入力して変更する必要があります。

148行目（私のjsバージョン）または「//ビデオ要素」コメントを検索してください。ビデオ オブジェクトの CSS 定義が見つかります。「下」の「上」属性を変更します。

これは次のようになります。

// video element
var $video = $('<video/>');
$video.css('position','absolute')
    .css('z-index',options.zIndex)
    .attr('poster',options.poster)
    .css('bottom',0) // top property changed
    .css('left',0)
    .css('min-width','100%')
    .css('min-height','100%');

このバージョンで使用するすべてのビデオは下部に配置されることに注意してください。

于 2013-09-05T17:37:06.240 に答える