phpbb 3.2.3 Responsive BBCodes f├╝r Videos (DSGVO-konform)

Alles rund um HTML, PHP und andere webgestalterischen Sachen
Antworten
Benutzeravatar
Axel
Heiliger Brun
Heiliger Brun
Beitr├Ąge: 3642
Registriert: Freitag 16. Juli 2004, 14:37
Wohnort: Bitterfeld-Wolfen
Kontaktdaten:
Deutschland

phpbb 3.2.3 Responsive BBCodes f├╝r Videos (DSGVO-konform)

Beitrag von Axel » Dienstag 13. November 2018, 15:35

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

Code: Alles ausw├Ąhlen

[youtube]https://www.youtube.com/watch?v={INTTEXT}[/youtube]
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.

Code: Alles ausw├Ąhlen

<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/{INTTEXT}" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
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.

Code: Alles ausw├Ąhlen

/* Custom styles
---------------------------------------- */
.video-wrapper {
	width: 640px;
	max-width: 100%;
}

.video-container {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
}

.video-container iframe, .video-container object, .video-container embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
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 ...

Code: Alles ausw├Ąhlen

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

[yt]https://youtu.be/{INTTEXT}[/yt]
HTML-Ersetzung

Code: Alles ausw├Ąhlen

<div class="video-wrapper">
<div class="video-container">
<iframe width="560" height="315" src="https://www.youtube-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.
... "I don't need GOOGLE my wife knows everything" ...

Antworten

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 1 Gast