Author Topic: Fehler im WYSIWYG-Editor beim Einbinden von Medien (z.B. Videos) (Read 9399 times)

masju · « **on:** March 22, 2020, 06:01:35 PM »

Hallo zusammen,

ich bin auf einen Fehler im Editor gestoßen (neuste WB-Version). Wenn ich mit dem Button "Medien Inhalt von Verschiedenen Seiten einbinden" (Tippfehler: "verschiedenen" wird eigentlich klein geschrieben) ein Youtube-Video einbaue, wird leider eine falsche URL als src des iframes abgespeichert.
Beispiel:

Code: [Select]

Video-URL: https://www.youtube.com/embed/_JVVEIx2CCsAbgespeichert wird:

Code: [Select]

src="https://www.meineseite.de/www.youtube.com/embed/_JVVEIx2CCs?wmode=transparent&jqoemcache=gcfah"
Das kann man zwar relativ schnell manuell fixen, ist aber doch für Laien ziemlich umständlich. Besteht die Möglichkeit, das zu reparieren und dass es bei der nächsten WB-Version behoben ist?

Viele Grüße,
Mathias

PS: Ah, sorry, falscher Forumsbereich... ist natürlich WB 2.12.2 r379

dbs · « **Reply #1 on:** March 23, 2020, 08:56:10 AM »

Hallo, da es sich um ein Plugin aus dem CKeditor handelt, hat WB direkt damit nicht viel zu tun.
Aber du hast recht, das Plugin entfernt das https: im iframe und WB ergänzt es beim Speichern mit der eigenen Domain.
In 2017 war das Problem schon mal gelöst, aber nur für die damalige Version des CK bzw. des Plugins.
Mal sehen ob was geht, danke für's Melden.

CodeALot · « **Reply #2 on:** March 23, 2020, 10:59:20 AM »

After many problems with CKEditor in embedding Youtube-videos, I disabled this function (button) for most of my clients and created a droplet that will allow them to insert a responsive Youtube-video anywhere they want.

Here's the droplet-code: (Droplet name: youtube)

Code: [Select]

$video= '<div class="youtube-embed-wrapper" style="position:relative;padding-bottom:56.25%;padding-top:0px;height:0;overflow:hidden;">';
$video .= '<iframe allowfullscreen="" frameborder="0" src="//www.youtube-nocookie.com/embed/'.$id.'?rel=0"';
$video .= ' style="position: absolute;top: 0;left: 0;width: 100%;height: 100%;"></iframe></div>';

return $video;

Usage: [[youtube?id=Q34mNi2JwX0]]

Where "id" is the unique id-code of the Youtube-video (the part right after "v=" in the Youtube-URL)

hgs · « **Reply #3 on:** March 23, 2020, 01:21:38 PM »

Gerade mal schnell eingebunden und getestet, es funktioniert.
Danke fürs teilen der Lösung

Just quickly integrated and tested, it works.
Thanks for sharing the solution

masju · « **Reply #4 on:** March 23, 2020, 01:33:30 PM »

Quote from: CodeALot on March 23, 2020, 10:59:20 AM

Here's the droplet-code: (Droplet name: youtube)

This will help. Thanks a lot!

masju

dbs · « **Reply #5 on:** March 25, 2020, 08:11:45 AM »

Ja, ein Droplet ist ein guter Weg.

Wer aber das Media Plugin weiter nutzen möchte, kann die angehängte Datei testen. Hier wurde gleich am Anfang eine kleine Korrektur vorgenommen, die das Problem lösen sollte. Die Datei umbenennen (.txt entfernen) und kopieren nach

Quote

/modules/ckeditor/ckeditor/plugins/oembed/libs/

Danach den Browsercache leeren (STRG+F5) oder erstmal auf eine andere Backendseite klicken.
Sollte sich keine Änderung zeigen, dann ist die neue Datei noch nicht aktiv. Browser einmal neustarten sollte helfen.

hgs · « **Reply #6 on:** March 25, 2020, 09:50:01 AM »

Gerade erfolgreich getestet.
Danke für die Lösung

CodeALot · « **Reply #7 on:** March 25, 2020, 10:29:19 AM »

Quote from: dbs on March 25, 2020, 08:11:45 AM

Ja, ein Droplet ist ein guter Weg.

Wer aber das Media Plugin weiter nutzen möchte, kann die angehängte Datei testen. Hier wurde gleich am Anfang eine kleine Korrektur vorgenommen, die das Problem lösen sollte. Die Datei umbenennen (.txt entfernen) und kopieren nach
Quote
/modules/ckeditor/ckeditor/plugins/oembed/libs/
Danach den Browsercache leeren (STRG+F5) oder erstmal auf eine andere Backendseite klicken.
Sollte sich keine Änderung zeigen, dann ist die neue Datei noch nicht aktiv. Browser einmal neustarten sollte helfen.

Tested your solution, but the videos are not responsive, regardless of the settings.

dbs · « **Reply #8 on:** March 25, 2020, 10:39:29 AM »

If your car has a broken wheel and i repair it, you tell me: but the car is too hot inside in summer.

It was only a soluton for the specific problem.

CodeALot · « **Reply #9 on:** March 25, 2020, 11:45:14 AM »

No, that was not what I meant. The plugin clearly lets you choose between fixed and responsive embedding, but the responsive embedding does not work.

So: you replaced the wheen but there is no tyre on it.

My droplet will only work for Youtube-videos, but it is responsive. Anything not responsive should not be in a website in 2020, I think

CodeALot · « **Reply #10 on:** March 25, 2020, 11:58:04 AM »

Here's the responsive droplet for embedding Vimeo-videos:

Code: [Select]

$vimeo = '<div style="padding:56.25% 0 0 0;position:relative;">';
$vimeo .= '<iframe src="https://player.vimeo.com/video/'.$id.'?title=0&byline=0&portrait=0" style="position:absolute;top:0;left:0;width:100%;height:100%;" ';
$vimeo .= 'frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe></div><script src="https://player.vimeo.com/api/player.js"></script>';

return $vimeo;

Usage: [[vimeo?id=123456789]]

News

Support WebsiteBaker