0

優れた jQuery swiper プラグイン ( http://www.idangero.us/sliders/swiper/ ) を使用して、コンテンツを「スライド」ごとに表示するスクロール プレーヤー インターフェイスを作成しました。各スライドは <article> です。標準の <iframe> メソッドを使用して Youtube ビデオを表示するには、いくつかのスライドが必要です。これは Safari と Chrome ではうまく機能しますが、Firefox では奇妙なことが起こります。プレーヤー インターフェースは 760 ピクセル幅 (その幅が割り当てられた <section> 要素内にすべてあります) で、狭いウィンドウでは Firefox は Youtube ビデオ プレーヤーの代わりに黒い四角形を表示します。ただし、Firefox ウィンドウの幅が 1521 ピクセル以上 (つまり、プレーヤーの幅の 2 倍以上) の場合、

また、Firefox で Youtube プレーヤーを右クリックすると、Flash コンテキスト メニューが画面の Flash プレーヤーの右に 1,000 ピクセル以上表示されます。

それは非常に奇妙です - 私はhttp://backattheranch.ca/matt/player/でデモを公開しました。どんな助けでも大歓迎です。ありがとう！

4

1 に答える 1

0

.swiper transform: translate3d();-wrapper 親要素にあります。同様の問題に遭遇し、親要素でその変換を削除すると修正されました。

これがあなたに影響を与える問題であることを再現するには:

  1. サンプル ページで、アイテム #3 を選択します。これにはビデオが含まれています。
  2. FireBug を開き、div.swiper-wrapper 要素を選択します。
  3. CSS エディターで、element.style と .swiper-wrapper クラスの両方で translate3d を「x」で外します。あなたのビデオは消えてしまいますが、恐れる必要はありません! それを元に戻し、これが実際に問題であることをテストするには、

  4. FireBug エディターの element.style に次の CSS を入力します。

    left: -1520px

ビデオが再び表示され、クリック可能で再生されることがわかります。

idangero.us の Web サイトを見たところ、この問題の更新は見当たりません。彼らのプレーヤーは、translate3d 変換を使用して物をスライドさせているようです。残念ながら、これは、translate3d を使用しない別のスワイパー ソリューションを見つけて要素を配置するか、これを修正して修正を待つ必要があることを意味します。

ビデオをサポートするスクローラーに行き詰まっている場合は、Malsup の Cycle 2を強くお勧めします。非常に拡張可能で、十分に文書化されています。ここで、Firefox で動作するスライダーの実行ビデオのデモを見ることができます。

Malsup Cycle 2のダウンロードには、タッチ機能を有効にするタッチ フレンドリーなスワイプ プラグインがあります。

Getty の Web サイトでは Cycle 2 を使用していますが、残念ながら現在、ビデオを表示するスライダーはありません。

于 2013-12-11T00:27:19.103 に答える