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: 3637
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 0 Gäste