Eselsstieg Forum

Die Styles selbst für die Forensoftware, sind mittlerweile alle responsive. Das bedeutet, sie passen sich selbständig der jeweiligen Auflösung an. Besonders essentiell für die Benutzung auf mobilen Endgeräten wie Tablets und Smartphones.

Für selbst erstellte BBCodes für Videos, müssen allerdings geringfügige Anpassungen vorgenommen werden.

Zuerst legt man einen neuen BBCode im im Adminpannel an. Beiträge => BBCodes und fügt dort einen neuen hinzu.

Beispiel an diesem Forum für YouTube Videos mit einer langen URL, welche man oben im Browserfenster kopiert ...

BBCode-Benutzung
HTML-Ersetzung

Man geht zu einem beliebigen YouTube-Video und klickt zuerst auf teilen. In dem folgenden Popup-Fenster auf die Schaltfläche <> Einbetten. Hier kann man die folgenden zwei Optionen wählen ...

Player-Steuerelemente anzeigen. (Bedeutet, dass man die üblichen Steuerlemente wie nochmal abspielen, die Steuerleiste , die Zeitleiste mit anzeigt. EMPFOHLEN!)

Erweiterten Datenschutzmodus aktivieren. (Hier kann man sozusagen den DSGVO-Modus aktivieren. Cookies über das Nutzerverhalten werden erst beim Abspielen eines Videos ausgegeben und nicht schon direkt bei der Vorschau in einem Thread. EMPFOHLEN!)

Nun kopiert man jeden Code und fügt ihn im Adminpannel folgendermaßen ein.
Da sich die URLs natürlich bei jedem Video ändern, setzt man sogenannte Tokens. In diesem Falle {INTTEXT} für die ID des Videos. Sieht man wunderbar in der Adresszeile des Browser, wenn man ein Video aufruft. Allerdings Achtung. Befindet sich dahinter ein & und weitere Zeichenangaben mit = list o.ä. darf man das nicht mit einfügen. Dass sind spezielle Angaben, wenn man z.B. eine Playlist verlinkt. Ansonsten wird schlichtweg kein Video angezeigt.

Tipp-Anzeige

Hier fügt man eine frei wählbare Beschreibung hinzu. Die sehen Benutzer bei der Verwendung, wenn sie mit der Mouse über die Schaltfläche fahren. Ich habe in diesem Fall YouTube langer Link angegeben.

Beim Verfassen eines Beitrags anzeigen

Haken rein, wenn die Schaltfläche für Benutzer beim verfassen eines Beitrages angezeigt werden soll.

Speichern, Forencache im Adminpannel leeren und fertig!

Aaaaabbbbbeeeeeeerrrrrrrr ...

Jetzt hat man einen funktionstüchtigen BBCode. Für PC-Freaks brauchbar. Für Besucher mit mobilen Endgeräten aber etwas unschön. Die Videos im mobilen Browser sind dann leider breiter als der Beitrag. Könnte man beheben, wenn man das Gerät ins Querformat dreht. Das sollte aber seriösen Seitenbetreibern keine wirkliche Lösung sein.

Um das zu ändern, müssen kleine Anpassungen im CSS-Code vorgenommen werden. Basierend auf diesen Thread ... https://www.phpbb.com/community/viewtopic.php?t=2298886

Erklärt für das Standard-Style prosilver ....

1) Man lädt die Datei common.css aus folgendem Verzeichnis herunter Hauptverzeichnis deiner Installation/styles/prosilver/theme

2) Ganz am Ende fügt man folgenden Code hinzu.
Speichern, hochladen und die bisherige Datei damit überschreiben. Es empfiehlt sich den simplen Editor und keine anderen Schreibprogramme zu benutzen. Grund: Zeichensatzkodierung bzw. möchte Wordpad oft eine normale Textdatei daraus erstellen.

3) Nun weiß aber der BBcode in der HTML-Ersetzung trotzdem noch nicht, wie man responsive macht. Das muss man nun dort mit angeben. Also auf die eben geänderte CSS und den eingefügten Code verweisen.

Siehe Code oben, so sieht es dann im Feld HTML-Ersetzung im Adminpannel bei der Einstellung des BBcodes dann aus ...
Mit dem Ausdruck class ruft der Code nun also die CCS ab, in der steht, wie responsive geht. Speichern und nun wirklich fertig.

Ich habe es mobil mit dem Smartphone (Android) ausgiebig getestet mit Google Chrome Mobile, Opera Mini, Opera Mobile, Microsoft Edge Mobile, Mozilla Firefox und Dolphin Browser.

Opera Mini ist die abgespeckte Version vom mobilen Browser. Ich selbst empfehle ihn nicht, da er z.B. den Code von Vimeo nicht lesen und ausgeben kann. Ebenfalls finde ich den Dolphin Browser mittlerweile eher schlecht. Abstürze, lange Ladezeiten.

Wer keine Lust hat es immer nebenher mit dem Handy zu testen, kann auch am PC prüfend schauen und ein mobiles Endgerät simulieren. Dazu gibt es in jedem Browser ein Entwicklertool.

Microsoft Edge, Mozilla Firefox und Google Chrome benutzen für den Aufruf das Tastenkürzel F 12.
Opera hingegen die Tastenkombination Strg + Shift + I

Keine Scheu, einfach mit den Schaltflächen spielen. Man kann nichts kaputtmachen.

Abschließende Anmerkung

Die gleiche Vorgehensweise erfolgt mit YouTube für kurze URLs und auch Vimeo.

Youtube kurze URL hat geschrieben: BBCode-Benutzung

Code: Alles auswählen

[media]https://youtu.be/{INTTEXT}[/media]

HTML-Ersetzung

Code: Alles auswählen

<div class="video-wrapper">
<div class="video-container">
<iframe width="560" height="315" src="https://www.media-nocookie.com/embed/{INTTEXT}" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>

Tipp-Anzeige YouTube kurzer Link

Vimeo hat geschrieben: BBCode Benutzung

Code: Alles auswählen

[vimeo]https://vimeo.com/{INTTEXT}[/vimeo]

HTML-Ersetzung

Code: Alles auswählen

<div class="video-wrapper">
<div class="video-container">
<iframe src="https://player.vimeo.com/video/{INTTEXT}" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
</div>

Tipp-Anzeige Vimeo

Wichtiger Hinweis

Dieses Tutorial gilt lediglich für das prosilver Style. Solltet ihr andere Styles verwenden, so müssen die CSS-Klassen ggf. in anderen CSS-Dateien geändert (hinzugefügt) werden.

Beispiel: https://www.phpbb.de/community/viewtopic.php?t=240671

Dieser Style basiert auf dem prosilver Style und hat keine eigene common.css. Änderungen der prosilver Styles haben somit auch automatisch Auswirkungen auf diesen Style.

Und jetzt wirklich die letzte Anmerkung: Immer den Forencache und auch den Browsercache leeren, sonst werden Veränderungen ggf. nicht angezeigt.