Design Clean
    >> Tipps zum anpassen

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



Hier wurde die Seite https://clean-test.de.tl/nix.htm eingebunden.

- die Seite wurde in der Navi versteckt
- nur auf der Seite wurden alle div + table entfernt
- im Feld "Text UNTER Design" wurde dieser Inhalt eingefügt
- Inhalt wurde nur für diese eine Seite sichtbar gemacht
- so lässt sich auch eine Seite in der Mediabox aufrufen

Man muss darauf achten, das die Seite hier nur soviel Inhalt bekommt, wie diese Box auch an Höhe hat.

Wer mehr Infos dazu benötigt: Kontakt
clean-test.de.tl: Heute :27 Aufrufe



Auf "autostart" habe ich verzichtet. Klicke Play im Player.

nach Oben