Zur Navigation

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!

02.01.2023 13:24

2 Jörg Kruse

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>');
        }
    });
});

02.01.2023 14:25

1 Forenmitglied fand diesen Beitrag gut

4 Jörg Kruse

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. -->

02.01.2023 16:36

1 Forenmitglied fand diesen Beitrag gut

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.

03.01.2023 09:27

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/

03.01.2023 11:39

... 7 Monate später ...

7 Lena567

Hallo Jörg,

Ich habe jetzt noch zwei weitere Änderungen vorgenommen.
Zum einen habe ich einen Container ergänzt, der ebenfalls nach dem Anklicken des Buttons entfernt wird und zum anderen habe ich ein Skript eingebaut, welches das scrollen smooth macht.
Das funktioniert auch, wenn die Seite aufgerufen wird, aber nach dem Anklicken des Buttons funktioniert das smooth scrollen nicht mehr.
Siehe hier:
http://lena91567.bplaced.net/load-iframe-on-click/index-Spezial.html
wie kann ich den Fehler beheben?

05.08.2023 11:11

8 Jörg Kruse

Lässt sich den grundsätzlich - auch ohne den Button - über mehrere Iframes hinweg smooth scrollen?

05.08.2023 12:41

1 Forenmitglied fand diesen Beitrag gut

10 Lena567

Der erste Link war falsch. Hier der richtige:
http://lena91567.bplaced.net/load-iframe-on-click/index-Spezial2.html

Habe dann noch zwei Beispiele mit dem Original-Skript (nicht komprimiert) erstellt:
http://lena91567.bplaced.net/load-iframe-on-click/index-Spezial02.html
http://lena91567.bplaced.net/load-iframe-on-click/index-Spezial22.html


Und dann habe ich noch ein Beispiel gemacht mit einer Landkarte. Dieses Beispiel funktioniert ohne jquery, aber auch hier der Fehler, wenn der Button angeklickt wird und man dann scrollt
http://lena91567.bplaced.net/load-iframe-on-click/index4.html

05.08.2023 15:46