Popup Player

Popup-Musikplayer

wenn wir das Extra "Hintergrundmusik" aktivieren, haben wir das Problem, das die Musik bei einem Seitenwechsel immer wieder neu startet. Der Player muss sich in einem eigenem Fenster öffnen, damit sie durchspielen kann. Die Lösung ist ein "Popup-Fenster".

Schritt 1: Player im Feld "Text UNTER Design"

  - auf "Design" gehen
  - auf "Designeinstellungen"
  - nun auf "erweiterte Einstellungen anzeigen"
  - hier finden wir das Feld "Text unter Design"
  - wir fügen dort ein DIV ein:
  - dies hat als Inhalt einen Player-Code

<div class="player">

<audio controls src="http://musik_url.mp3" type="audio/mp3"></audio>

</div>

Ihr könnt im DIV auch ein Youtube Musikvideo einfügen
Beachtet dann aber die Video-Größe / bzw die Größe des Popup-Fensters

---

Schritt 2: Unsichtbar machen für alle Seiten

  - geht nun in das Feld "Text ÜBER Design"
  - wir fügen einen CSS-Code ein
  - wir geben dem DIV damit eine Breite
  - und die Eigenschaft nicht sichtbar

<style type="text/css">
div.player {
     width: 300px;
     padding: 20px;
     overflow: hidden;
     display: none;
}
</style>

---

Schritt 3: Eine neue Seite erstellen

  - wir erstellen eine neue Seite
  - mit dem Seitentitel Musik
  - diese Seite bekommt ebenfalls einen CSS-Code
  - damit entfernen wir das komplette Design
  - auf dieser Seite wird nur das DIV mit Player sichtbar
  - im Editor oben Links auf "Quellcode" klicken
  - und folgenden Code einfügen:

<style type="text/css">
<!--

/* Design entfernen */
div, table { display: none!important; }

/* Player DIV sichtbar */
div.player { display: block!important; }

/* Hintergrundfarbe */
body { background:  none #FFFFFF!important; }

-->
</style>

Wir haben nun eine Seite mit dem Titel "Musik" erstellt, auf der man nur den Player sieht
Auf diese Seite können wir nun Verlinken. Und im Popup öffnen lassen

---

Schritt 4: Die Seite im Popup öffnen

  - die rechte Box eignet sich am besten für diesen Link
  - die Verlinkung kann aber auch im Seiteninhalt eingefügt werden:

<a href="javascript:void(window.open('/Musik.htm','', 'left=50, top=50, width=450,height=200'))">Popup-Player</a>

So siehts dann aus : Popup-Player
Bei einem Seitenwechsel spielt die Musik durch