Mehrere iframes per Knopfdruck laden

1 Lena567

Hallo Leute,

Zuerst einmal wünsche ich euch allen ein gutes und schönes Jahr 2023!
Möge es uns allen nur Gutes bringen.

Ich möchte per Knopfdruck mehrere iframes laden.
Genauer gesagt sollen YouTube-Videos geladen werden.
Und aufgrund der Datenschutz-Grundverordnung eben erst nach dem Anklicken einer Schaltfläche.

Hierzu habe ich das folgende Skript gefunden:
https://codepen.io/creotip/pen/BaogwB

Wie muss denn das folgende Skript abgeändert werden, damit mehrere YouTube-Videos nach Knopfdruck geladen werden?

$(function(){
    $('#button').click(function(){ 
        if(!$('#iframe').length) {
                $('#iframeHolder').html('<iframe id="iframe" src="https://www.youtube-nocookie.com/embed/dV86B7bXaGo" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" width="560" height="315"></iframe>');
        }
    });   
});

Vielen lieben Dank schon mal für eure Hilfe!

2 Jörg

Am einfachsten so:

$(function() {
    $('#button').click(function() {
        if (! $('#iframe1').length) {
            $('#iframeHolder1').html('<iframe id="iframe1" ...></iframe>');
        }
        if (! $('#iframe2').length) {
            $('#iframeHolder2').html('<iframe id="iframe2" ...></iframe>');
        }
    });
});

3 Lena567

Lieber Jörg, vielen Dank für deine Hilfe!

Für den Fall, dass ich alles richtig gemacht habe, funktioniert es trotzdem nicht.
Siehe hier:
http://lena91567.bplaced.net/load-iframe-on-click

4 Jörg

Du benötigst für jedes Video einen Container mit der jeweils gleichen ID wie im JavaScript-Code:

<div id="iframeHolder1"></div>
<div id="iframeHolder2"></div>
<!-- etc. -->

5 Lena567

Vielen Dank für deine erneute Hilfe Jörg!
Darauf hätte ich eigentlich selbst kommen müssen, bin ich aber leider nicht.

6 Lena567

Dank deiner Hilfe lieber Jörg habe ich habe ich das ganze nun wie gewünscht umsetzen können.

Habe jetzt noch ein paar Ergänzungen vorgenommen.
Die Schaltfläche verschwindet, wenn man darauf geklickt hat und die ganze Seite ist responsive.

http://lena91567.bplaced.net/load-iframe-on-click/

nach oben

Mehrere iframes per Knopfdruck laden

Beitrag schreiben (als Gast)