Panorama in WordPress einbinden

Eine mit krpano erstellte virtuelle Tour lässt sich in WordPress auf mehreren Wegen einbinden, vom einfachen iFrame bis zur direkten Einbettung per JavaScript. Diese Anleitung zeigt alle gängigen Methoden mit fertigem Code zum Kopieren und erklärt, wann welche Methode die richtige ist.

So funktioniert es: das Grundprinzip

krpano exportiert eine Tour als eigenen Ordner mit index.html, tour.js, tour.xml sowie den Ordnern files/ (Bilder, Plugins) und optional tour_editor.html. Diese Dateien sind keine WordPress-Inhalte und lassen sich nicht über die Mediathek hochladen. Der Ablauf ist immer derselbe:

1. Tour hochladen: Den kompletten Tour-Ordner per FTP/SFTP oder Dateimanager des Hosters auf den Webspace kopieren, z. B. nach /vtours/ffw40/. Danach ist die Tour direkt unter https://deine-domain.de/vtours/ffw40/index.html erreichbar. Das ist die Tour-URL.
2. Tour-URL testen: Zuerst die URL direkt im Browser öffnen. Läuft sie dort, läuft sie auch eingebettet.
3. In die Seite einbinden: Im Block-Editor einen Block „Eigenes HTML“ (Custom HTML) einfügen und den Code einer der folgenden Methoden einsetzen.
4. Immer https verwenden: Die Tour muss über https:// geladen werden, sonst blockiert der Browser sie auf einer https-Seite („Mixed Content“).

Übersicht: Welche Methode passt?

Methode	Aufwand	Responsive	Vorteile	Nachteile	Ideal für
1. Einfacher iFrame	sehr gering	bedingt (feste Höhe)	Funktioniert überall, 1 Zeile Code, Tour bleibt vom Theme getrennt	Feste Höhe passt nicht zu jedem Gerät	Schneller Einstieg, einzelne Tour
2. Responsiver iFrame	gering	ja	Passt sich Bildschirm und Seitenverhältnis an	Etwas mehr CSS	Standardlösung für die meisten Seiten
3. Vollbreit / Bildschirmhöhe	gering	ja	Großer Auftritt, passt sich der Fensterhöhe an	Scrollen auf der Seite kann am Tour-Rand schwierig sein	Startseiten, Landingpages
4. Button / Link (neuer Tab)	sehr gering	ja	Beste Performance, echter Vollbildmodus auch auf iPhone	Besucher verlässt die Seite	Seiten mit mehreren Touren, Mobil-Fallback
5. Lightbox / Popup	mittel	ja	Seite lädt schnell, Tour öffnet erst auf Klick, wirkt hochwertig	Eigener JS/CSS-Code nötig	Galerien, Referenzen, Vorschaubilder
6. Shortcode	mittel (einmalig)	ja	Wiederverwendbar, zentral änderbar, kurz: `[krpano url="…"]`	Eingriff in `functions.php` oder Snippet-Plugin	Viele Touren, mehrere Autoren
7. Direkte Einbettung (ohne iFrame)	hoch	ja	Kein iFrame, volle Kontrolle, Zugriff auf krpano-API (JS-Steuerung)	Konflikte mit Theme/Plugins möglich, Pfade müssen stimmen	Fortgeschrittene, Tour-Steuerung per Button
8. Lazy-Load per Klick (Vorschaubild)	mittel	ja	Beste Ladezeit und Core Web Vitals, Datenschutz (erst nach Klick wird geladen)	Ein Klick mehr für Besucher	Seiten mit vielen Bildern, Datenschutz-Fokus
9. Plugin (z. B. Advanced iFrame)	gering	ja	Komfortable Oberfläche, Zusatzfunktionen	Zusätzliches Plugin, Pflege und Updates	Nutzer ohne Code-Erfahrung

Methode 1: Einfacher iFrame

Der Klassiker. Ein iFrame zeigt die Tour-Seite in einem Rahmen innerhalb deiner Seite. Einfügen über den Block „Eigenes HTML“.

<iframe src="https://pantastic.de/vtours/ffw40/index.html"
        title="Virtuelle Tour"
        width="100%" height="600"
        style="border:0"
        allow="fullscreen; gyroscope; accelerometer; xr-spatial-tracking"
        allowfullscreen loading="lazy"></iframe>

Vorteil: Einfach, robust, kein Konflikt mit Theme oder Plugins.
Nachteil: Die feste Höhe von 600 px passt auf Handys oft nicht optimal.
Tipp: frameborder="0" ist veraltet. Besser style="border:0". allow="gyroscope; accelerometer" aktiviert die Bewegungssteuerung auf Smartphones, title ist wichtig für die Barrierefreiheit.

Methode 2: Responsiver iFrame (Seitenverhältnis)

Statt einer festen Höhe bestimmt das Seitenverhältnis die Größe. Auf großen Bildschirmen 16:9, auf Handys ein höheres Format, damit die Tour groß genug bleibt.

<style>
.krpano-wrap{position:relative;width:100%;aspect-ratio:16/9;border-radius:8px;overflow:hidden}
.krpano-wrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
@media (max-width:600px){.krpano-wrap{aspect-ratio:4/5}}
</style>
<div class="krpano-wrap">
  <iframe src="https://pantastic.de/vtours/ffw40/index.html"
          title="Virtuelle Tour"
          allow="fullscreen; gyroscope; accelerometer; xr-spatial-tracking"
          allowfullscreen loading="lazy"></iframe>
</div>

Vorteil: Sieht auf Desktop, Tablet und Handy gut aus, ohne Anpassung pro Gerät.
Nachteil: Etwas mehr Code. Bei mehreren Touren auf einer Seite die <style>-Angabe nur einmal einfügen.

Methode 3: Volle Breite und Bildschirmhöhe

Die Tour füllt die Breite des Fensters und etwa 80 % der Fensterhöhe. In den Gruppen-Block die Ausrichtung „Volle Breite“ wählen (Einstellung align: full), damit sie den Inhaltsbereich des Themes verlässt.

<iframe src="https://pantastic.de/vtours/ffw40/index.html"
        title="Virtuelle Tour"
        style="width:100%;height:80vh;min-height:400px;border:0"
        allow="fullscreen; gyroscope; accelerometer; xr-spatial-tracking"
        allowfullscreen loading="lazy"></iframe>

Vorteil: Großer Auftritt, passt sich der Fensterhöhe an.
Nachteil: Beim Scrollen per Mausrad zoomt die Tour, die Seite scrollt nicht weiter. Etwas Platz oberhalb und unterhalb lassen, damit Besucher weiter scrollen können.

Methode 4: Button oder Link zur Tour (neuer Tab)

Die Tour wird nicht eingebettet, sondern per Link geöffnet. Das ist die schnellste Variante und der beste Fallback für Smartphones, denn auf dem iPhone funktioniert der Vollbildmodus in iFrames nicht zuverlässig.

Virtuelle Tour im Vollbild öffnen

<a href="https://pantastic.de/vtours/ffw40/index.html" target="_blank" rel="noopener">Virtuelle Tour im Vollbild öffnen</a>

Alternativ im Block-Editor einen normalen Button-Block einfügen und die Tour-URL als Link eintragen. Dafür ist kein HTML-Code nötig.

Vorteil: Keine Ladezeit auf der Seite, echter Vollbildmodus, kein Code.
Nachteil: Besucher verlassen die Seite (mit target="_blank" öffnet sich ein neuer Tab).
Tipp: Kombinierbar mit Methode 1 oder 2: unter dem iFrame ein Link „Tour im Vollbild öffnen“ für Handynutzer.

Methode 5: Lightbox / Popup

Die Tour öffnet sich erst nach einem Klick in einem Overlay. Das funktioniert ohne Plugin mit dem modernen HTML-Element <dialog>.

<button id="kp-open">Tour im Popup öffnen</button>
<dialog id="kp-dialog" style="width:min(1100px,95vw);height:85vh;padding:0;border:0;border-radius:10px;overflow:hidden">
  <button id="kp-close" aria-label="Schließen" style="position:absolute;top:8px;right:8px;z-index:2">✕</button>
  <iframe id="kp-frame" title="Virtuelle Tour" style="width:100%;height:100%;border:0"
          allow="fullscreen; gyroscope; accelerometer; xr-spatial-tracking" allowfullscreen></iframe>
</dialog>
<script>
(function(){
  var d=document.getElementById('kp-dialog'), f=document.getElementById('kp-frame');
  document.getElementById('kp-open').addEventListener('click',function(){ f.src="https://pantastic.de/vtours/ffw40/index.html"; d.showModal(); });
  function close(){ d.close(); f.src='about:blank'; }
  document.getElementById('kp-close').addEventListener('click',close);
  d.addEventListener('click',function(e){ if(e.target===d) close(); });
  d.addEventListener('cancel',function(){ f.src='about:blank'; });
})();
</script>

Vorteil: Die Tour wird erst nach dem Klick geladen, die Seite bleibt schnell. Schließen per Escape-Taste, Klick daneben oder Button.
Nachteil: Eigener Code nötig. Pro Seite sollten die IDs nur einmal vorkommen; für mehrere Touren die IDs durchnummerieren.
Hinweis: Skripte im Block „Eigenes HTML“ sind nur für Benutzer mit dem Recht unfiltered_html (Administratoren, Redakteure in Einzelinstallationen) erlaubt.

Methode 6: Shortcode (wiederverwendbar)

Wer viele Touren einbindet, definiert einmalig einen Shortcode. Danach genügt in jeder Seite eine Zeile. Den PHP-Code in ein Snippet-Plugin (z. B. WPCode oder Code Snippets) oder in die functions.php des Child-Themes einfügen.

add_shortcode( 'krpano', function ( $atts ) {
    $a = shortcode_atts( array(
        'url'    => '',
        'height' => '600px',
        'ratio'  => '',            // z. B. 16/9, ersetzt die Höhe
        'title'  => 'Virtuelle Tour',
    ), $atts, 'krpano' );

    if ( empty( $a['url'] ) ) {
        return '';
    }

    $size = $a['ratio']
        ? 'aspect-ratio:' . esc_attr( $a['ratio'] )
        : 'height:' . esc_attr( $a['height'] );

    return sprintf(
        '<iframe src="%s" title="%s" style="width:100%%;border:0;%s" allow="fullscreen; gyroscope; accelerometer; xr-spatial-tracking" allowfullscreen loading="lazy"></iframe>',
        esc_url( $a['url'] ),
        esc_attr( $a['title'] ),
        $size
    );
} );

Verwendung in Seite oder Beitrag (Block „Shortcode“). Hier mit doppelten eckigen Klammern dargestellt, damit er nicht ausgeführt wird. Im Editor nur einfache Klammern verwenden:

[[krpano url="https://pantastic.de/vtours/ffw40/index.html" ratio="16/9" title="Feuerwehr Hauswache 40"]]

Vorteil: Kurz, einheitlich, zentral änderbar (z. B. neue allow-Werte für alle Touren auf einmal).
Nachteil: Einmalige Einrichtung, bei Theme-Wechsel Snippet-Plugin oder Child-Theme nutzen, damit der Code erhalten bleibt.

Methode 7: Direkte Einbettung ohne iFrame (embedpano)

Die Tour wird nicht in einem iFrame, sondern direkt in einem <div> der Seite aufgebaut. Das ist die Methode, die krpano selbst für Einbettungen vorsieht. Sie bietet Zugriff auf die krpano-JavaScript-API, z. B. um die Tour per Button zu steuern.

<div id="pano" style="width:100%;height:600px"></div>

<script src="https://pantastic.de/vtours/ffw40/tour.js"></script>
<script>
embedpano({
  xml: "https://pantastic.de/vtours/ffw40/tour.xml",
  target: "pano",
  html5: "only",
  passQueryParameters: "startscene,startlookat"
});
</script>

Beispiel: Szene per Button wechseln (die Szenennamen stehen in der tour.xml):

<button onclick="document.getElementById('krpanoSWFObject').call('loadscene(scene_eingang,null,MERGE,BLEND(1))')">Zum Eingang</button>

Vorteil: Kein iFrame, die Tour lässt sich mit der Seite verbinden (eigene Buttons, Karten, Menüs).
Nachteil: Theme-CSS und Plugins können in die Tour eingreifen. Relative Pfade in der tour.xml müssen stimmen (krpano-Tools verwenden meist %CURRENTXML%, das funktioniert). Mehrere Touren auf einer Seite erfordern eindeutige target-IDs.
Hinweis: Nur für Benutzer mit dem Recht unfiltered_html. Bei Problemen zuerst Methode 2 testen.

Methode 8: Vorschaubild mit Klick zum Laden (Lazy-Load)

Statt der Tour wird zunächst nur ein Vorschaubild (z. B. ein Screenshot der Tour) geladen. Erst nach dem Klick ersetzt der iFrame das Bild. Das spart Ladezeit und ist datenschutzfreundlich.

▶ Virtuelle Tour starten

<div class="krpano-wrap" id="kp-lazy" style="position:relative;aspect-ratio:16/9;cursor:pointer;background:#000">
  <img src="https://ffgp.de/wp-content/uploads/2026/10/tour%2Dvorschau.png" alt="Vorschau der virtuellen Tour"
       style="width:100%;height:100%;object-fit:cover" loading="lazy">
  <span style="position:absolute;inset:0;display:grid;place-items:center;color:#fff;font:600 1.2rem sans-serif;text-shadow:0 1px 4px #000">
    ▶ Virtuelle Tour starten
  </span>
</div>
<script>
document.getElementById('kp-lazy').addEventListener('click', function () {
  this.innerHTML = '<iframe src="https://pantastic.de/vtours/ffw40/index.html" title="Virtuelle Tour" style="position:absolute;inset:0;width:100%;height:100%;border:0" allow="fullscreen; gyroscope; accelerometer; xr-spatial-tracking" allowfullscreen></iframe>';
}, { once: true });
</script>

Vorteil: Schnellste Seitenladezeit, gut für Core Web Vitals und SEO. Es werden erst nach dem Klick Daten übertragen.
Nachteil: Ein zusätzlicher Klick. Vorschaubild in der Mediathek hochladen und den Pfad anpassen.

Methode 9: Mit einem Plugin

Wer keinen Code anfassen möchte, kann ein Plugin wie Advanced iFrame oder Iframe verwenden. Dort lassen sich URL, Höhe, Breite und Vollbild bequem in einer Oberfläche einstellen, zum Teil auch automatische Höhenanpassung.

Vorteil: Komfortabel, viele Optionen, kein Code.
Nachteil: Zusätzliches Plugin (Updates, Sicherheit, Ladezeit). Für reine krpano-Touren ist ein einfacher iFrame (Methode 1 oder 2) meist die schlankere Lösung.

Checkliste und häufige Probleme

Problem	Ursache	Lösung
Tour bleibt weiß / „Verbindung abgelehnt“	Server sendet `X-Frame-Options: DENY` oder `Content-Security-Policy: frame-ancestors`	Header auf dem Tour-Server anpassen oder Tour auf derselben Domain wie WordPress hosten
Tour wird nicht angezeigt (https-Seite)	Tour-URL beginnt mit `http://` (Mixed Content)	Tour-URL mit `https://` verwenden
Vollbild-Button fehlt oder funktioniert nicht	`allowfullscreen` bzw. `allow="fullscreen"` fehlt; auf dem iPhone nicht unterstützt	Attribute ergänzen; für iPhone Link zum Öffnen in neuem Tab anbieten (Methode 4)
Gyroskop / Bewegungssteuerung am Handy geht nicht	Fehlende `allow`-Rechte im iFrame, Seite nicht per https	`allow="gyroscope; accelerometer"` setzen, https verwenden
Code wird im Editor verändert oder Skript entfernt	Block „Absatz“ oder „Klassisch“ statt „Eigenes HTML“; fehlendes Recht `unfiltered_html`	Block „Eigenes HTML“ verwenden, als Administrator speichern
Tour lädt nicht oder Szenen fehlen	Ordner unvollständig hochgeladen, Groß-/Kleinschreibung der Dateinamen	Alle Dateien inkl. `files/` hochladen, Tour-URL direkt im Browser prüfen
Tour ist auf dem Handy zu klein	Feste Höhe in Pixel	Methode 2 mit angepasstem Seitenverhältnis oder `vh`-Höhe nutzen

Empfehlung

Für die meisten Seiten: Methode 2 (responsiver iFrame) plus ein Link „Im Vollbild öffnen“ (Methode 4) für Handys.
Für viele Touren: Methode 6 (Shortcode).
Für schnelle Seiten und Datenschutz: Methode 5 oder 8 (Laden erst nach Klick).
Für interaktive Steuerung der Tour: Methode 7 (embedpano).