0

クリックすると、レスポンシブな全幅ビデオを含む DIV を (状態に応じて) スライドアップまたはスライドダウンする必要があるリンクがあります。レスポンシブでワイドスクリーンのビデオであるため、高さを固定することはできません (私の既存のコードはこれを行っており、変更する必要があります)。この DIV (動画を含む) は、ページの読み込み時に非表示にする必要があります。

ここに既存のコードがあります: http://jsfiddle.net/D5EMp/は、ビデオを非表示/表示するという点である程度機能します。ただし、主な問題は、ページの読み込み時にビデオの高さが表示され、空白のスペースが作成されることです。

ショーリールの状態が変化したときに、この領域の下のコンテンツがプッシュダウンまたはプルアップされる間、ビデオを上下にスライドさせ、水平の黒いバーからフェードイン/アウトさせる必要があります。

ボーナスは、リンクがクリックされたときにページがその開始 DIV にスクロールする機能を追加することです。

4

2 に答える 2

3

CSS に追加したパディングがギャップを引き起こしています。

padding-bottom: 56.25%; /* 16/9 ratio */
padding-top: 30px; /* IE6 workaround*/

このパディングが表示されているときにアニメーション化できますが、こちらの例では、Firefox でビデオが乱雑になるようです。

その高さにアニメーション化する前に正しい高さを計算し、パディングをまったく使用しません。16/9 ビデオの正しい高さを取得するには、幅を 16 で割り、9 を掛けます。実際の例:

http://jsfiddle.net/D5EMp/2/

ページをビデオの上部に自動スクロールするには、これをアニメーションの完全な関数として配置できます。

function(){$('html, body').scrollTop($('#showreel').offset().top);}

例: http://jsfiddle.net/D5EMp/4/

于 2012-09-17T11:11:03.710 に答える
0

空白スペースは、＃showreelに設定したパディングからのものであり、削除するだけです。

http://jsfiddle.net/D5EMp/1/をご覧ください

最大の問題は、ビデオのサイズを知る方法です。しかし、私の考えでは、ロードされる前にビデオのサイズを知ることは不可能です。iframeにアクセスすると、クロスドメインの問題が発生します。

em、テクノロジーだけでなく、この問題を解決する別の方法を探すことができます

それが私の考えです

于 2012-09-17T10:59:36.890 に答える