問題タブ [fitvids]

レスポンシブ ビデオにFitVidsを使用しています。次のようにインスタンス化します。

fitVids()480px 未満の画面サイズで 1 つの特定の要素に適用したいので、それを実装しました。ただし、表示目的でfitVids()、ユーザーがブラウザーのサイズを変更して表示を小さな幅で確認する場合にも適用する必要があり、このようなことを行いました

...これは正常に動作fitVids()しますが、最初に考えたような参照クラスとは対照的に、参照された DOM 要素に適用されているようです。つまり、(より広い画面サイズの場合) クラスを削除しても、fitVids()思った通り。

fitVids()それで、私が要素を呼び出したことを削除する方法はありますか?

編集 - これにunbindメソッドを使用できるかどうか疑問に思っていましたか?

親領域を可能な限り埋めるために、fitvids にビデオのサイズを変更させようとしています。これが私のフィドルです：

http://jsfiddle.net/LkqTU/9513/

コード：

html:

なぜそれが機能しないのですか？

ビデオを bxSlider のスライドに配置すると、デスクトップ ブラウザーでは正常に再生されますが、iOS デバイス (iPhone および iPad) でテストすると、ビデオは再生されません。

現在のhtmlコードを含めました。<video>すべてのデバイスで正常に再生されるスライドショーの下の要素を複製しました。

ビデオの bxSlider ガイドに従って、 jquery.fitvids.jsファイルを含めました。問題はそのプラグインに関係している可能性があります。それを削除すると、スライドのビデオは再生されますが、スライドショーは正しく機能しません (複製されたスライドが表示され、コントロールが失われます)。

もう 1 つの予想外の注意点は、bxSlider を初期化するスクリプトがライブラリの下のヘッドに配置されると、bxSlider がまったく開始されないことです。

jsフィドル

コンテンツが読み込まれたら、 Fancyboxモーダル コンテンツでFitVidsプラグインを初期化しようとしています。ユーザーがビューポートのサイズを変更するときにコールバックを使用すると完全に機能しますが、コンテンツが表示されたらそれを適用するように動作させようとすると、何も得られません。スローして動作することを確認するためにテストしましたが、成功しました。onUpdateafterShowafterShowconsole.log('whatever')

これは私が使用しているコードです:

私はこれをWordPress Webサイトで使用しています。ここでは、クリックするとfancyboxモーダルウィンドウをトリガーし、jQueryload関数を介してページの一部をロードする石積みのタイルにコンテンツがロードされます。FitVids を除いて、すべてがうまく機能します。多くの場合、タイル モーダル コンテンツには iframe ビデオの埋め込みが含まれており、タッチ/モバイル デバイスで連携する必要があります。

前もって感謝します。

よく知られているプラ​​グインにこの問題が発生するのは奇妙です。私はそれに対して何時間も戦い、ついに勝ちました。この投稿は、同じ問題に陥るすべての人に高く評価されると思います。

私が持っているとしますTwitter-Bootstrap（またはdivを折りたたむ/展開できる別の同様のフレームワーク）。ご存じのとおり、iframe をリンクのターゲットにして、さまざまな URL を表示することができます。この場合、一意の iframe に表示されるさまざまな YouTube ビデオを参照しています。

#youtubecontainerの親である が折りたたまれ#youtube-frameているとします。リンク ターゲティング#youtube-frame(上記のコードのようなもの) をクリックすると、jQuery.onclickイベントを通じて#youtubecontainer展開されます。次に、それfitVids()に適用されます（コードのこの時点以外では実行できませんでした。実際、展開される前は、#youtubecontainer js には存在しませんでした）。しかし…驚き！

fitVids()は生の html から'src' 属性を取得し、それを iframe に適用して、たどったばかりのターゲット リンクをオーバーライドします!!! jQueryfitVids()プラグインは主に#youtube-frame「src」属性を参照しているようです。私の試み：

• 特定のビデオを「src」に残すと、そのビデオは、クリックする他のビデオを上書きします。
• 'src' を空のままにしておくか、属性を完全に削除しても、問題は解決されず、望ましくないビデオではなく、ブラック ボックスだけが表示されます。:D
• リンクをもう一度クリックすると、最終的にリンクが表示されます。しかし、それは迷惑です。
• jquery.fitvids.js (変数セレクター) を編集して、YouTube の「iframe src」セレクターをすべて削除し、「#youtube_frame」のエントリを追加しても、問題は解決しません。

私は疲れていた。私は可能な解決策だけを見つけました。また、このスクリプトの作成者がそれを強化してくれることを願っています...誰かがビデオ要素のアスペクト比を維持したい場合、要素の ID を指す代わりに、このスクリプトが「src」で物事を混乱させるのは本当に奇妙です。属性... フレームが 1 つの src しか処理できない場合と同じように.....

考えられる解決策:

1. eventhandlersまたはを使用して、jQuery でタイミングを操作し、正しい順序を維持しsetTimeout()ます。これを行うには、動画へのリンク方法を変更する必要があります<a target="#youtube_frame"。fitVids よりも早く起動する を使用する代わりに、jquery でクリックを処理し、iframe の 'src' 属性を変更する必要があります。

正しい順序は次のとおりです。

• 1) Expand the Video Container;
• 2）fitVids()その上に。

• 3)$('#youtube_frame').attr('src', $(this).attr('href'))

  (この最後のポイントは、srcクリックしたリンクからビデオの URL を取得して、iframe の属性を設定します)。もちろん、これはクリックイベントで実行される関数内に配置する必要があります。

他の解決策がある場合は、投稿してください。fixVids の作成者がこの問題を認識してくれることを願っています。個人的には、プラグインを完全に修正する方法がわかりません。「src」属性をそのままにしておくためです。

新しい単一ページのテストケース > [ http://pastebin.com/uLjJvhxC ]

下の空の Macbook の画像があります。

画像は1034×543です。

画面の「灰色」の領域内にYouTubeビデオを挿入したい。YouTubeビデオがラップトップ画面で再生されているように見せたいです。

また、ラップトップの画像/YouTubeビデオをスケーリングして、Webページがタブレットまたはモバイルビューにあるときに、画像とビデオが一致するように縮小する必要があります.

これを達成するために使用しようとしてfitvid.jsいますが、運がありません-ビデオを1つの静的サイズに合わせることができますが、サイズ変更時に完全に合わせることができず、変形します.

以下は私の現在のマークアップです：

html :

サス：