Video-Link in Image-Map mit Lightbox öffnen - geht das?

gks · 28.11.2020 22:07:09

Guten Abend,

ich habe einen Adventskalender als Collage montiert (jpg), und eine Image-Map darüber gelegt. Am entsprechenden Kalendertag wird dann ein Link zu einem Video mit Weihnachtsliedern o.ä. gesetzt. Das klappt alles soweit. Allerdings wird man dadurch auf eine andere seite (z.B. YouTube) weitergeleitet. Hier mal ein Mustercode von Wikipedia.

[== HTML ==]
<img src="bild.jpg" alt="alternativtext" usemap="#mapname" />
<map name="mapname">
  <area shape="rect" coords="9,372,66,397" href="http://de.wikipedia.org/" alt="Wikipedia" title="Wikipedia" />
</map>

Nun würde ich gerne diesen Video-Link in einer Lightbox öffnen, u.a. damit die Besucher auf der Webseite bleiben. Die Videos wurden von Schüler*innen selbst produziert und vorher eingereicht und werden von mir zu YouTube hochgeladen (um keine Ruckler wegen unseres nicht so flotten Hosters zu haben).

Die hier im Forum gefundene Lösungen zum Einbetten von Youtube-Videos konnte ich nicht so anpassen, dass es klappt. Geht das also überhaupt, und wenn ja, wie sieht so eine Codezeile aus?

Vielen Dank für's Interesse! thumb_up Ich wünsche einen schönen 1. Advent.

GKS

florian · 29.11.2020 08:47:58

Eventuell hiermit
https://github.com/grt107/grt-youtube-popup

gks · 29.11.2020 10:36:50

Hallo Florian,
danke für die Antwort. So, wie es auf der Demoseite dort aussieht, würde es mir zusagen.

Verstehe ich es richtig, dass ich die Punkte 1, 2 und 4 (s.u.) in meinem Template unterbringen muss?

grt107 wrote:

1- Include the plugin stylesheet file grt-youtube-popup.css inside your <head> tag
[== HTML ==]
<link rel="stylesheet" href="grt-youtube-popup.css">
2- Include the plugin javascript file grt-youtube-popup.js inside the <body> tag and after jquery.min.js
[== HTML ==]
<script src="grt-youtube-popup.js"></script>
3- Add a custom class and insert the id of the Youtube video as a new attribute youtubeid="yPu6qV5byu4" like in the example below:
[== HTML ==]
<span class="youtube-link" youtubeid="yPu6qV5byu4">Open Video</span>
4- Initialize the plugin at the end of all javascript files using your custom class (after jquery.min.js and grt-youtube-popup.js)
[== HTML ==]
  <script> $(".youtube-link").grtyoutube(); </script>

Mit Punkt 3 habe ich Bauchschmerzen: kann ich das href="..." einfach durch <span class="youtube-link" youtubeid="yPu6qV5byu4">Open Video</span> ersetzen? Das Kalenderbild mit der Image-Map ist ganz normal in einem WYSIWYG-Abschnitt untergebracht. Ich habe es noch nicht probiert, weil ich keine offline-Version der Seite habe.

Ich habe mein Vorhaben leider nicht vollständig beschrieben: Es soll quasi jeden Tag die entsprechende neue Tür des Kalenders hinzukommen. Die schon „geöffneten“ sollen möglichst trotzdem weiterhin auf das dahinter versteckte Video verweisen, auch wenn der Tag schon vorbei ist. D.h., am Ende sind 24 Links in dem Abschnitt vorhanden.

Danke für die Hilfe,
GKS

florian · 29.11.2020 11:54:57

Grundsätzlich verstehst Du das richtig, wobei der Punkt 3 etwas anders umgesetzt werden muss, d.h. den span braucht es gar nicht, und eine area-Anweisung sähe dann z.B. so aus:

    <area target="" alt="1" title="1" href="#" class="youtube-link" youtubeid="yPu6qV5byu4" coords="309,111,221,15" shape="rect">

Es kann allerdings sein, dass der CKEditor da das youtibeid rauslöscht.

(Auch) wegen der Zeitsteuerung könnte man das mit OneForAll realisieren.

So geht's:

a) Vorbereitung:
1.) JSON-Datei aus dem Anhang zu diesem Post herunterladen.
2.) Plugin von Github herunterladen und lokal entpacken.
3.) Dateien per FTP oder AFE in ein Verzeichnis auf dem Webspace (z.B. Templateverzeichnis) kopieren.
4.) OneForAll installieren.
Hinweis: Wenn OfA bereits installiert und in Verwendung ist, muss es für den Adventskalender unter anderem Namen installiert werden. Dazu OfA herunterladen, lokal entpacken, info.php anpassen, zippen und als z.B. "adventskalender" installieren.
Diese Anpassung auch in der JSON-Datei vornehmen ("mod_name":"oneforall" zu "mod_name":"adventskalender" ändern)
5.) Auf der Seite, auf der der AK erscheinen soll, einen neuen OfA- (bzw.adventskalender-)Abschnitt anlegen.
6.) Bei diesem Abschnitt auf "Allgemeine Einstellungen" klicken, dort dann auf "Durchsuchen" und die JSON-Datei auswählen. Auf "Import" klicken. Hinweis Bestätigen, Etwas verwirrende rot unterlegte Hinweise zur Kenntnis nehmen (das gehört so), auf "zurück" klicken.
7.) Ganz nach unten scrollen und auf "Speichern" klicken.
8.) Auf Seiteneinstellungen klicken.
9.) In der Kopfzeile den Platzhalter "__VOLLSTÄNDIGE_URL_DES_BILDES" durch die Bild-URL ersetzen, z.B.

https://example.com/media/adventskalender.jpg

und den Platzhalter "__VERZEICHNIS_MIT_JQ-PLUGIN-DATEIEN__" durch das Verzeichnis ersetzen, in dem die Dateien des Plugins liegen, z.B.

https://example.com/templates/wbcezon

10.) In der Fußzeile ebenfalls den Platzhalter "__VERZEICHNIS_MIT_JQ-PLUGIN-DATEIEN__" durch das Verzeichnis ersetzen, in dem die Dateien des Plugins liegen
11.) Auf "Speichern" klicken.

b) Nun für jedes Türchen:
1.) Auf "Eintrag hinzufügen" klicken.
2.) Felder ausfüllen
Titel: beliebig (z.B. 1, 2...)
Youtube-Video-ID: NUR die ID, nicht den vollständigen Link, z.B. tgbNymZ7vqY
coords: die Koordinaten wie im area-Tag
shape: rect, circle oder poly
Zeitsteuerung: Start- und ggf. Endzeitpunkt
3.) speichern

gks, Slugger

gks · 29.11.2020 12:15:59

Vielen herzlichen Dank für deine ausführliche Antwort! Das werde ich heute nachmittag nachvollziehen (ich bin leider gerade anderweitig beschäftigt) und dann kurz berichten, ob es geklappt hat.

So eine Schritt-für-Schritt-Anleitung ist genau das Richtige für mich als Gelegenheits-Webseitenbearbeiter. Und wenn sich die Zeitsteuerung mit OfA auch gleich umsetzten ließe, wäre das natürlich großartig.

Also, ich melde mich. Versprochen!

GKS

gks · 29.11.2020 21:14:03

Hallo Florian,
ich hatte heute leider viele Dinge zu erledigen, aber jetzt bin ich endlich dazu gekommen, die Sache auszuprobieren. Und: Es funktioniert thumb_up !

Aber: wo Licht ist, ... Nun haben heute einige Schüler*innen zwar einer Veröffentlichung auf unserer Schulwebseite zugestimmt, jedoch nicht bei Youtube cry . Das hätte Ihnen zwar auch früher einfallen können, aber dies ist ein freies Land.

Und so stehe ich vor einem neuen Problem, und muss ich dich mit einer zusätzlichen Frage belästigen. Kann ich in diesem OfA-Abschnitt auch „mischen“, d.h. auch Videos verlinken, die im Media-Verzeichnis abgelegt sind? Falls ja, wie?

Danke für deine Geduld und die großartige Hilfe.

GKS

florian · 30.11.2020 08:01:24

Das machts komplizierter.
1.) Lade das Droplet im Anhang zu diesem Post herunter und installiere es über Admintools > Droplets > Import.
2.) Lade die license.txt, videopopup.css und videopopup.js aus dem Anhang zu diesem Post herunter und kopiere sie an dieselbe Stelle auf dem Server, an der schon die anderen JS/CSS-Dateien des Adventskalenders liegen.
3.) Gehe zu Medienverwaltung. Klicke auf "Ordner erstellen" und lege ein Verzeichnis an, in das später die Videos hochgeladen werden, z.B. adventskalender.
3.) Gehe zu der Adventskalender-Seite im Backend und klicke auf "Eingabefelder".
4.) Füge ein neues Feld vom Typ "Datei upload" hinzu. Geben ein Verzeichnis an, in das die Videos später hochgeladen werden sollen, also z.B. /adventskalender. Beachte den führenden Slash.
5.) Ändere das Feld-Template zu einem schlichten

[CUSTOM_CONTENT]

6.) klicke auf "Speichern".
Das muss dann so aussehen wie im Screenshot im Anhang.
7.) Klicke auf den Button Seiten-Einstellungen.
Ergänze in der Kopfzeile

<link rel="stylesheet" href="__VERZEICHNIS_MIT_JQ-PLUGIN-DATEIEN__/videopopup.css">

Ersetze alles, was bei "Beitrag Schleife" steht, durch

[[vidloc?ti=[TITLE]&yt=[FIELD_1]&loc=[FIELD_4]&iid=[ITEM_ID]&coords=[FIELD_2]&shape=[FIELD_3]&foo=bar]]

Ergänze in der Fußzeile

<script src="__VERZEICHNIS_MIT_JQ-PLUGIN-DATEIEN__/media/adv/videopopup.js"></script>

Ersetze wie gehabt in obigen Codebeispielen den Platzhalter "__VERZEICHNIS_MIT_JQ-PLUGIN-DATEIEN__" durch das Verzeichnis, in dem die Dateien des Plugins liegen.

8.) Klicke auf den Button "Allgemeine Einstellungen". Ändere den Wert für "Upload Dateierweiterung" auf

mp4,mp4

(Doppelte Angabe muss so, da ist ein Bug in OfA)

Wenn Du jetzt einen neuen Eintrag hinzufügst, hast Du ein neues Eingabefeld bzw. eine "Durchsuchen"-Schaltfläche, über die die Videos hochgeladen werden können.
Sollten die Videos für den Upload zu groß sein, Ändere den Typ des hinzugefügten Feldes auf "Datei aus Unterverzeichnis aus media" und lade die Videos per FTP dorthin hoch. Achte nach dem Ändern des Feldtyps darauf, dass Das Feldtemplate wieder auf [CUSTOM_CONTENT] gesetzt wird.

Quelle für das 2. Script: https://netteria.net/html5-video-popup-jquery/105/

Last edited by florian (30.11.2020 08:26:21)

Slugger, berny, gks, screamindan

webbird · 30.11.2020 11:24:02

Solch ein umfangreicher Support kostenlos, das sucht mal bei anderen CMS! thumb_up

berny, gks

gks · 30.11.2020 20:57:17

Hallo zusammen, hallo Florian,

ich musste heute länger arbeiten und konnte mich erst vor 2 Stunden ransetzen, daher die Funkstille. Erst mal erneut vielen Dank für die Mühe. Wenn ich geahnt hätte, was das für Ausmaße annimmt, hätte ich mich gar nicht getraut, zu fragen.

Leider klemmt es, und ich finde trotz intensiver Suche den Fehler nicht.

Fehlerbeschreibung: Unter dem Kalender erscheint

Fehler wrote:

[[vidloc?ti=1_12_2020&yt=&loc=
name
1_12_2020
&iid=2&coords=402,241,530,300&shape=rect&foo=bar]]

Das Video im angelegten Medienverzeichnis wird in der Auswahlliste im BE angezeigt und kann auch ausgewählt werden.
Die Links erscheinen nicht, wenn man mit der Maus über das Bild fährt, was aber sicher auch an dem Fehler liegt.

Ich suche noch weiter. cry
GKS

Last edited by gks (30.11.2020 21:00:41)

florian · 30.11.2020 21:01:06

Das ist der Droplet-Aufruf, der sollte eigentlich nicht ausgegeben werden, sondern ausgeführt werden.
Vielleicht ist es am einfachsten, wenn Du mir per PM oder an support@wbce.org den Link zur SEite sowie Zugangsdaten schickst, dann richte ich Dir das da schnell ein.

gks · 30.11.2020 21:09:21

Ich merke gerade, dass mir bei den Droplets - trotz Erfolgsmeldung beim Import - kein Droplet mit dem Namen vidloc angezeigt wird.

Mal sehen, ob ich das hinbekomme.

Edit: Fehlermeldung ist schon einmal weg, nachdem ich es händisch angelegt habe.
GKS

Last edited by gks (30.11.2020 21:11:42)

florian · 30.11.2020 21:12:14

Eigenartig. Hab's gerade nochmal getestet. Aber kann sein, dass der Import aus Strato-Gründen nicht geht. Dann einfach "zu Fuß" ein Droplet "vidloc" anlegen und folgenden Code hineinkopieren:

if (isset($yt)) {
$rv = ' <area target="" alt="'.$ti.'" title="'.$ti.'" href="javascript:void(0);" class="youtube-link" youtubeid="'.$yt.'" coords="'.$coords.'" shape="'.$shape.'">';
} else {
$rv = ' <area target="" alt="'.$ti.'" title="'.$ti.'" href="javascript:void(0);"  id="video'.$iid.'" coords="'.$coords.'" shape="'.$shape.'">';

$rv.= '<div id="vidBox'.$iid.'"><div class="videCont"><video autoplay id="v'.$iid.'" controls="controls"><source src="'.$loc.'" type="video/mp4"></video></div></div>';
$rv.= '<script type="text/javascript">$(function () {  $(\'#vidBox'.$iid.'\').VideoPopUp({ backgroundColor: "#17212a", opener: "video'.$iid.'",maxweight: "640", idvideo: "v'.$iid.'"});});</script>';
}

return $rv;

gks · 30.11.2020 22:10:16

Ja, genau so habe ich es gemacht.

Das Problem ist jetzt zum Teil gelöst:
Die Feldnummer war falsch, da unter Eingabefelder beim Klick auf „neue Felder hinzufügen“ wegen der Voreinstellung „2“ gleich zwei neue Felder angelegt wurden. Und ich habe dann in Feld 5 alles wie vorgegeben eingetragen. Bei der Übersicht stand aber Field_4. Fehlermeldung ist nun weg.

Nun klappt es mit den lokalen Videos, was zur Not reicht.

Aber:
Das Test-Youtube-Video wird nicht gestartet/angezeigt. Das hatte vorher funktioniert.

Ich lese gerade, dass du mal reinschauen würdest. (Du hast eine E-Mail)

Danke, GKS

florian · 30.11.2020 22:24:27

Läuft jetzt. Im Feld "Übersicht (Fußzeile)" fehlte der Aufruf des Youtube-Plugins, also das hier:

		<script>
			$(".youtube-link").grtyoutube({
				autoPlay:true,
				theme: "dark"
			});
</script>

gks · 30.11.2020 22:39:19

Super thumb_up ,

das ist ja eine Punktlandung, schließlich ist morgen der erste Advent. Und dann auch noch super komfortabel mit Zeitsteuerung.

Das in der Fußzeile habe ich vergessen? Oh Mann ... mad

Ich staune, was mit OfA alles geht. Vielleicht sollte einer von Euch Profis mal ein paar Video-Tutorials dazu machen. Ich könnte mir vorstellen, dass das vielen „Ottonormal-Usern“ (wie mir) den Einstieg erleichtern würde.

Vielen Dank und alles Gute undvorallemgesundbleiben! Bei unserem Kalender werden wirklich gute Beiträge zu finden sein, schaut gerne mal vorbei.

www.haendelgym.de

(Wenn ihr dem weihnachtlichen Händel „in die Augen“ schaut, könnt ihr eine kleine Kostprobe sehen.)

GKS

Last edited by gks (30.11.2020 22:52:41)

gks · 03.12.2020 00:16:15

Hallo,

es gibt leider ein Problem, auf das ich erst heute aufmerksam gemacht wurde: In diversen Browsern (Chrome, Edge, Opera, ...) wird sofort mit Seitenaufruf der Ton des aktuellen Videos abgespielt (ohne, dass man auf die Tür klickt). Das Bild des Videos wird nicht angezeigt. Bei den - schon länger - verlinkten Youtube-Videos (Link bei den Augen von Händel) tritt das nicht auf.

Diese Phänomen tritt - bei mir - aber nur im Edge- und Opera-Browser ständig auf, beim Firefox und Chrome sporadisch. Es kann aber sein, dass ich da schon irgendwann einmal im Browser das autolpay abgeschaltet hatte.

Gibt es in den Browsern so etwas wie eine Autoplay-Funktion, und kann man die über die Webseite steuern?

Ich habe leider keine Idee, was man da machen hönnte, ich finde es schon sehr störend.

Danke für das Interesse,
GKS

Last edited by gks (03.12.2020 00:52:54)

bernd · 03.12.2020 01:35:39

Du hast in dem Script-Schnippsel aus #14 das autoPlay: true HTML-mäßig mit  auskommentiert.
Das funktioniert so nicht.
Zeilen in Javascript müsstest du mit vorangestellten // auskommentieren, das hilft aber in dem Fall nicht, da dann der Default-Wert true aus dem Plugin greift, du musst das autoPlay gezielt auf false setzen.

gks

gks · 03.12.2020 07:36:44

Danke Bernd,
wie man sieht, bin ich ein Anfänger roll , was das angeht.

Leider beeinflusst das Script-Schnippsel aus #14 nur das autoPlay von Youtube-Videos. Die werden aber wirklich erst nach dem Anklicken angezeigt und abgespielt. Da muss ich bei autoplay:false lediglich noch zusätzlich das Abspielen starten.

Ich werde wohl erst einmal zu meiner Imagemap zurückkehren, da nun doch erst einmal alle Videos bei unserem Hoster gespeichert wurden. Dann gehen zwar die Zeitsteuerung und die lightbox wieder verloren, aber dann autoplay stört mich mehr (bei mehreren geöffneten Türen wurden auch mehrere abgespielt).

Danke für deinen Hinweis, auch wenn er mein Problem nicht löst.
GKS

Last edited by gks (03.12.2020 07:49:29)

florian · 03.12.2020 08:04:05

So weit ich sehe (bzw. höre) betrifft das nur die lokal eingebundenen Videos, nicht die Youtube-Videos.
Ändere im Droplet mal Zeile 6

$rv.= '<div id="vidBox'.$iid.'"><div class="videCont"><video autoplay id="v'.$iid.'" controls="controls"><source src="'.$loc.'" type="video/mp4"></video></div></div>';

zu

$rv.= '<div id="vidBox'.$iid.'"><div class="videCont"><video id="v'.$iid.'" controls="controls"><source src="'.$loc.'" type="video/mp4"></video></div></div>';

(d.h. nimm da das Autoplay raus). Dann sollte das nicht mehr passieren.

gks

gks · 03.12.2020 08:40:11

thumb_up Das war's. Wenn man lesen kann, und weiß, wo man hineinschauen muss, ist es gar nicht so schwer. big_smile

Nein, im Ernst: Vielen Dank für diesen Hinweis!

GKS

florian

WBCE CMS Forum

Announcement

#1 28.11.2020 22:07:09

Video-Link in Image-Map mit Lightbox öffnen - geht das?

#2 29.11.2020 08:47:58

Re: Video-Link in Image-Map mit Lightbox öffnen - geht das?

#3 29.11.2020 10:36:50

Re: Video-Link in Image-Map mit Lightbox öffnen - geht das?

#4 29.11.2020 11:54:57

Re: Video-Link in Image-Map mit Lightbox öffnen - geht das?

#5 29.11.2020 12:15:59

Re: Video-Link in Image-Map mit Lightbox öffnen - geht das?

#6 29.11.2020 21:14:03

Re: Video-Link in Image-Map mit Lightbox öffnen - geht das?

#7 30.11.2020 08:01:24

Re: Video-Link in Image-Map mit Lightbox öffnen - geht das?

#8 30.11.2020 11:24:02

Re: Video-Link in Image-Map mit Lightbox öffnen - geht das?

#9 30.11.2020 20:57:17

Re: Video-Link in Image-Map mit Lightbox öffnen - geht das?

#10 30.11.2020 21:01:06

Re: Video-Link in Image-Map mit Lightbox öffnen - geht das?

#11 30.11.2020 21:09:21

Re: Video-Link in Image-Map mit Lightbox öffnen - geht das?

#12 30.11.2020 21:12:14

Re: Video-Link in Image-Map mit Lightbox öffnen - geht das?

#13 30.11.2020 22:10:16

Re: Video-Link in Image-Map mit Lightbox öffnen - geht das?

#14 30.11.2020 22:24:27

Re: Video-Link in Image-Map mit Lightbox öffnen - geht das?

#15 30.11.2020 22:39:19

Re: Video-Link in Image-Map mit Lightbox öffnen - geht das?

#16 03.12.2020 00:16:15

Re: Video-Link in Image-Map mit Lightbox öffnen - geht das?

#17 03.12.2020 01:35:39

Re: Video-Link in Image-Map mit Lightbox öffnen - geht das?

#18 03.12.2020 07:36:44

Re: Video-Link in Image-Map mit Lightbox öffnen - geht das?

#19 03.12.2020 08:04:05

Re: Video-Link in Image-Map mit Lightbox öffnen - geht das?

#20 03.12.2020 08:40:11

Re: Video-Link in Image-Map mit Lightbox öffnen - geht das?

Board footer