埋め込みFlickr動画iframeをjQueryでターゲティングできません

Question

埋め込みFlickr動画を反応性の高いテーマに対応させようとしています。私はTumblrで取り組んでいます。私は他の埋め込みビデオやオーディオプレーヤー（Youtube、Vimeo、Soundcloud、Spotifyなど）とうまくやっていますが、Flickrのビデオは重なり合っており、親コンテナにそれらを入れることができません。

Flickrの動画iframeとその子要素の中には、コンテンツのオーバーフローを引き起こしているインラインCSS宣言があります。 Here's a screenshot with the iframe structure

まず、CSSでこれらのスタイルを上書きしようとしましたが効果がありません。 次にjQueryを試しましたが、iframeをターゲティングすることはできません。 iframeにもかかわらず

<iframe frameborder="0" allowfullscreen="" class="flickr-embed-frame" webkitallowfullscreen="" mozallowfullscreen="" oallowfullscreen="" msallowfullscreen="" width="700" height="393" data-natural-width="1024" data-natural-height="576" style="overflow: hidden; padding: 0px; margin: 0px; width: 700px; height: 393px; max-width: none;" data-loaded="true"></iframe> 

はCSSクラス.flickr-embed-frameを持っている私はできませんどちらもターゲットも、またその子要素。私は$(document).ready()と$(window).load()の中で私の機能を試してみました。

$('.flickr-embed-frame').contents().find('.child-class');のようなセレクタはどちらも機能しませんでした。

<video src="https://www.flickr.com/photos/138041208@N02/27214754585/play/hd/9ecf29781c/" width="699" height="393" poster="https://farm8.staticflickr.com/7776/27214754585_9ecf29781c_c.jpg" controls=""></video> 

はまた、結果なしで$('video[src^="https://www.flickr.com"]')のようなセレクタでそれをターゲットにしようとした：

iframe内部video要素があります。

質問が見つかりませんでしたので、誰かが解決策をとることを願っています。ありがとう。

編集 = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - -

、私は手作業でFlickr VideoをTumblrの代わりにJSFiddleに埋め込もうとしました（ビデオへのURLリンクを貼り付けるだけです）。

<a data-flickr-embed="true"   href="https://www.flickr.com/photos/138041208@N02/27214754585/in/dateposted-public/" title="Test video"><img src="https://c2.staticflickr.com/8/7776/27214754585_9ecf29781c_b.jpg" width="1024" height="576" alt="Test video"></a><script async src="//embedr.flickr.com/assets/client-code.js" charset="utf-8"></script> 

はiframeは、後から追加JavaScriptでDOMに注入されていることをしているように見える：これは、Flickrのは、映像を表示するために、あなたのコードに追加するように求められたコードです。これは、私がiframeを、CSSまたはjQueryのどちらも対象にすることができない理由です。なぜなら、最初は存在しないからです。

私の質問はです。このiframeがDOMに注入された時期はどうすれば確認できますか？この方法で、私はそれをターゲットにして、jQueryを介して必要な変更を加えることができます。

SOLVED = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = -

I最終的にこの問題の解決策が見つかったので、私のコメントを確認してください。

Answer 1

感謝を使用しているようです。名前/検出ノード挿入）私はこれを解決することができました。

まず、IFRAMEが挿入されたときに開始しますアニメーションを追加：

/* set up the keyframes; remember to create prefixed keyframes too! */ 
@keyframes nodeInserted { 
    from { opacity: 0.99; } 
    to { opacity: 1; } 
} 

アニメーションは、あなたが（この場合は、インラインフレーム）をリッスンしたい要素に適用する必要があります。

.parent-container iframe { 
    animation-duration: 0.001s; 
    animation-name: nodeInserted; 
} 

アニメーションが終了すると、挿入イベントが発生します。

まず、あなたがイベントリスナーのコールバックとして動作する関数を作成する必要がありますアニメーション名は希望のアニメーションと一致した場合

var insertListener = function(event){ 
    if (event.animationName == "nodeInserted") { 
     // This is the debug for knowing our listener worked! 
     // event.target is the new node! 
     console.warn("Another node has been inserted! ", event, event.target); 
    } 
} 

、我々は、DOMノードが注入されています知っています。今、私たちは親にイベントリスナーを追加します。

document.addEventListener("animationstart", insertListener, false); // standard + firefox 
document.addEventListener("MSAnimationStart", insertListener, false); // IE 
document.addEventListener("webkitAnimationStart", insertListener, false); // Chrome + Safari 

Here's a demo私は正常に動作し、埋め込まれたFlickrのビデオを作っ：ありがとうサミ・スタークが

Answer 2

チェックアウトSO上でこの前の記事：How to access the content of an iframe with jQuery?

ソリューションは、デビッド・ウォルシュ（davidwalshによって公開された、かなり巧妙なトリックにjQueryのcontents()

$("#myiframe").contents().find("#myContent")