Manchmal ist es notwendig dynamisch erzeugte Elemente zu manipulieren, die zum Zeitpunkt von $(document).ready() oder $(window).load() noch nicht vorhanden sind. Dafür ist das Event $('body').on('DOMNodeInserted') sehr nützlich.
Im folgenden Beispiel wird ein von Magnific Popup dynamisch erzeugtes YouTube-Iframe auf die No-Cookie-Variante von YouTube geändert:
jQuery(document).ready(function($)
{
// Event-Listener für DOMNodeInserted
$('body').on('DOMNodeInserted', function()
{
// Prüfen, ob das gesuchte Iframe ins DOM eingefügt wurde
var mfp_iframe=$(this).find('iframe.mfp-iframe');
if(mfp_iframe.length)
{
// Parameter vorbereiten
var src=mfp_iframe.attr('src');
var src_no_cookie=src.replace('youtube.com', 'youtube-nocookie.com');
// Iframe anpassen
mfp_iframe.attr('src', src_no_cookie);
mfp_iframe.attr('rel', '0');
}
});
});
Wenn ich mehr als ein Video pro Seite habe, ersetzt dieser Code mir jedoch alle videos mit dem zurerst gefundenen link.
gibt es da ne lösung für? Sonst ist das nämlich genial.
Ja klar, du musst in der Zeile var mfp_iframe=$(this).find(‚iframe.mfp-iframe‘); einfach nur den Selektor so anpassen, dass nur die von dir gewünschten Videos ausgewählt werden.
und wie mache ich es wenn ich mehrere youtube.com videos durch ihre youtube-nocookie.com alternative auf einer Seite ersetzen möchte?
Ich kann dir an dieser Stelle leider keinen jQuery-Kurs anbieten, nur so viel: mfp_iframe.each(function() { … });
Viel Erfolg!
oder anders ausgedrückt wie mache ich daraus eine each function ?