TinyMCE und das leidige »responsive Youtube-Problem«

[teletubbie]

Ich melde mich mal wieder mit einem leidigen Thema. Das Einbinden von Youtube-Videos ist ja heute schon Standard auf Webseiten. Leider hat der TinyMCE in Redaxo 4x keine adäquate Medieneinbindung mit der ein »normaler« Redakteur klarkommt. Es gibt den Medienbutton bei dem man letztendlich nur einen iframe einbinden kann. Allerdings muss man dann aufpassen, dass dieser nicht die Größe vom Video verändert. Dazu kommt noch, dass das Kernpropblem für responsive, ein Video muss in ein eigenes div eingebettet werden, ebenfalls nicht gelöst ist.

Derzeit wird von den Redakteuren einfach der iframe von Youtube per html eingetragen. Ich laufe dann immer hinterher und stell erst einmal die richtige Größe u.ä. ein, weil natürlich einfach kopiert wird was Youtube als erstes anbietet. Das ist natürlich keine vernünftige Lösung. Ich kann nicht erwarten, dass sich alle mit den Problemen von html auskennen. Ausserdem ist das Vorgehen in Zeiten von »Partnervermittlung mittels Wischgeste« kaum zu vermitteln.

CKEditor soll eine Youtubemodul haben. Kriege ich irgendwie nicht zum laufen. Löst aber nicht mein Problem, da wir den Blog benutzen und da ist TinyMCE drinn der noch in der Version 2.5 werkelt. Für eine neuere Version gibt es wohl einen Youtube-Button. Module stehen im Blog nicht zur Verfügung.

Hat irgendjemand bereits eine Lösung für das Problem oder besser gesagt, die Probleme gefunden

LG
Daniel

[Oliver.Kreischer]

Hallo Daniel,

ich kenne das Problem nicht da ich immer nur mit Textile (und evtl. MarkItUp) arbeite.

Auch kenne ich das verwendete Modul nicht.
Evtl. ist es eine Lösung das Modul um eine Textfeld zu erweitern in dem man nur die YouTube ID eingeben muss.
Die responsive Ausgabe des Videos muss dann natürlich in der Ausgabe des Moduls berücksichtigt werden.
So hat dein Tiny nichts mit den Youtube Videos zu tun...

LG
Oliver

[anita]

hallo Daniel,

das geht prima mit dem CKEditor. Ein div anlegen, die css-Klassen embed-responsive und embed-responsive-16by9 (das Format, das Du möchtest) dem div geben. In dem div ein iframe anlegen mit class="embed-responsive-item" und weiter wie gewohnt.

[teletubbie]

Hallo Anita,

da sind wieder meine zwei Probleme.

Der CKEditor steht im Blog nicht zur Verfügung. Da ist der TinyMCE eingebunden und andere Module lassen sich nicht nutzen. Wir haben über 800 Artikel im Blog. Da kann ich das System nicht so einfach wechseln. Das macht mir zunehmend Sorgen wenn ich die Entwicklung von Redaxo ansehe. In der Datenbank habe ich fast 70 eingebundene Videos gefunden. Die könnte ich notfalls händisch umschreiben. Jedes neue Video nachträglich zu editieren ist nicht praktikabel. Dann ist mit den kurzfristigen Veröffentlichungen nichts mehr drin.

Das mit den divs ist für mich eigentlich nicht das Problem. Nur wie erkläre ich das jemandem der nur Texte erfasst bzw. die Inhalte schreibt. Im Moment bin ich froh, dass das Kopieren des iframes von Youtube im HTML-Editor funktioniert. Wenn auch oft mit der falschen Größe. Dann auch noch divs anlegen lassen klappt nicht. Zumal das extrem Fehlerbehaftet ist. Ein falscher Buchstabe und alles ist im Eimer oder Tiny löscht es raus. Es muss im Prinzip eine DAU-Lösung her.

Für den 3er-Tiny gab es mal Youtube-Buttons als Plugin. Grademal eines habe ich zum Laufen gebracht. Und das ist veraltet und formatiert den Link zu einer Flash-Datei. Mit dem Erfolg das nichts geht. Für die neueren Tinys gibt es Plugins die sogar direkt eine Such- und Vorschaufunktion bei Youtube anbieten. Es ist echt schwierig wenn man nichts anbieten kann was für Normalanwender geeignet ist.

LG
Daniel

[runstop64]

Hi,

Der TinyMCE und der CKEditor sollten eigentlich recht unproblematisch gegeneinander ausgetauscht werden können, da beide nur eine Fassade über ein <textarea> Input-Feld legen. Da in der Datenbank reines HTML landet, sind die Daten unabhängig vom Editor. Zum Austausch müsstest du wohl nur die vom Editor benötigten Attribute an den Textareas austauschen und natürlich deine Einstellungen portieren. (Auch wenn es recht einfach ist, solltest du ein vorheriges Backup nicht vergessen oder eine Testinstallation nehmen).
Eine andere Möglichkeit ist, über eine REDAXO-Action die benötigten DIVs und Klassen vor dem Speichern an die Iframes zu hängen, also das was du momentan manuell machst zu automatisieren.
Letzte Variante, und bei einer hohen Anzahl schon vorhandener Daten am besten: Im Ausgabemodul die benötigten DIVs und Klassen an die Iframes hängen.
Das Einfügen von zusätzlichem HTML sollte mit einem preg_replace recht einfach zu bewerkstelligen sein und keine merklichen Performanceinbußen mit sich bringen.

[runstop64]

Hier gibt es zB. einen Filter für Wordpress, der Iframes zu Bootstrap-Responsive-Iframes anpasst:
https://gist.github.com/glauberportella ... 5f9d577e80
Das sollte sich recht einfach zu einem Redaxo OUTPUT_FILTER umbauen lassen.
(Ich habe ihn allerdings nicht getestet)

[runstop64]

Und schlussendlich gibt es natürlich die Möglichkeit, jemanden zu suchen, der dir den Tiny auf eine aktuelle Version updatet...

[anita]

wieso lassen sich andere Module nicht einbinden?

wenn die Videos von Leuten reingestellt werden, die mit einem editor nicht so gut umgehen können, wäre für die zukünftigen Videos ein eigenes Modul ganz nützlich