[3.3] BBCode für Vimeo

[stefan-franz]

Hallo allerseits,

Vimeo hat den Datenschutz geändert, so dass bei privaten Videos (die man nur findet, wenn man den Link kennt) die Einbindung ins Forum nur mit dem Hashtag funktioniert. Ich habe das Video zwar mit einem BBCode eingebettet bekommen, jedoch wird es am Handy (wenn man es hochkannt hält) nicht in der Breite eingepasst - also ca doppelt so breit wie das Display. Könnt Ihr mir da helfen, wie ich den BBCode richtig erstelle?

Der Einbettungscode von Vimeo sieht z. b. so aus:

Code: Alles auswählen

<iframe src="https://player.vimeo.com/video/637012981?h=c27a3b1fc3" width="640" height="360" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>

So hab ich das bisher gemacht:

BBCode Benutzung:

Code: Alles auswählen

[vimeo-video]{URL}[/vimeo-video]

HTML Ersetzung

Code: Alles auswählen

<iframe src="{URL}" width="640" height="360" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>

Tipp Anzeige:

Code: Alles auswählen

Vimeo URL incl. player and hash from embed code: e. g. https://player.vimeo.com/video/637012981?h=c27a3b1fc3

Besten Dank schon mal für eine Idee wie ich das Video eingefügt bekomme, dass es sich in der Breite am Handy einfügt (und beim Querdrehen natürlich wieder breiter wird).

[Mike-on-Tour]

Ich rate jetzt mal: Wenn du in deinem HTML-Ersetzungscode die Werte width="640" height="360" vorgibst, dann wird der Browser sie natürlich auch verwenden. Was passiert denn, wenn du diesen Teil aus dem Ersetzungscode löscht?

[3Di]

jedoch wird es am Handy (wenn man es hochkannt hält) nicht in der Breite eingepasst

Das sollte reichen

HTML Ersetzung

<span style="display:inline-block;width:100%"><span style="display:block;overflow:hidden;position:relative;padding-bottom:56.25%"><iframe allow="autoplay; fullscreen; picture-in-picture" allowfullscreen src="{URL}" style="border:0;height:100%;left:0;position:absolute;width:100%"></iframe></span></span>

[stefan-franz]

jedoch wird es am Handy (wenn man es hochkannt hält) nicht in der Breite eingepasst

Das sollte reichen

HTML Ersetzung

<span style="display:inline-block;width:100%"><span style="display:block;overflow:hidden;position:relative;padding-bottom:56.25%"><iframe allow="autoplay; fullscreen; picture-in-picture" allowfullscreen src="{URL}" style="border:0;height:100%;left:0;position:absolute;width:100%"></iframe></span></span>

Das funktioniert. Vielen Dank für den tollen Support.
Es wird sowohl am 27er Monitor als auch am Smartphone immer die maximal zur Verfügung stehende Breite verwendet.

Eine Frage noch am Rande: Wenn ich Videos mit dem Media Embed Plugin einbinde (bis vor ca. 4 Wochen ging das auch noch für Vimeo) oder jetzt auch Youtube, dann werden die Videos am 27er Monitor nicht ganz in voller Breite des Beitrages angezeigt sondern nur ca. 60%. Am Smartphone aber schon.

Welcher Parameter ist für die Breite am großen Bildschirm dafür verantwortlich?

[3Di]

Youtube - Beispiel für Links https://www.youtube.com/watch?v=3YxaaGgTQYM

Ein beliebiger youtube-Link reicht aus, aber verwenden Sie nur die Video-Kennung. (3YxaaGgTQYM)

BBCode Benutzung:
[youtube]{IDENTIFIER}[/youtube]

HTML Ersetzung

<span style="display:inline-block;width:100%"><span style="display:block;overflow:hidden;position:relative;padding-bottom:56.25%"><iframe allowfullscreen="" loading="lazy" scrolling="no" src="https://www.youtube.com/embed/{IDENTIFIER}" style="border:0;height:100%;left:0;position:absolute;width:100%"></iframe></span></span>

Tipp Anzeige:
Insert YouTube URL – Example: [youtube]3YxaaGgTQYM[/youtube]

[stefan-franz]

Vielen Dank.

Und wenn ich das Vimeo Video aber in der normalen "kleinen" Größe haben möchte (wie es die normale media empbed Erweiterung einbindet). Geht das auch mir der Art von Code?

Am großen Bildschirm geht bei mir der rechte Rand ca bis Anfang der Bearbeitungszeichen für einen Beitrag.

[3Di]

Beide Codes sind so optimiert, dass sie sich automatisch in der Breite erweitern und auf jedem Gerät ansprechbar sind. Media Embed verwendet eine Library (s9e), die ihre eigene responsive Klasse hat.

Am großen Bildschirm geht bei mir der rechte Rand ca bis Anfang der Bearbeitungszeichen für einen Beitrag.

Beispiel mit einem Bildschirmfoto?

[stefan-franz]

Dieses Video ist mit dem neuen BBCode eingebunden - volle Breite auf großen Display 1920x1080
Wird auf Smartphone auch jeweils zur vollen Breite skaliert.

[ externes Bild ]

Dieses Vimeo Video wurde mit dem Media Embed Plugin eingebunden (wenn man bei Vimeo die Videos auf "Bei Vimeo ausblenden" oder "öffentlich" stellt kann man es ja noch mit dem Plugin ganz normal einbinden. So sehen auch die Youtube Videos von der Größe heraus, die man nur mit dem Link einbinden kann.

[ externes Bild ]

Meine Frage: Kann ich (bei Bedarf) den Code für die obige Variante so abändern, dass das Video bei großen Displays in etwa der Größe angezeigt wird, wie im Video 2?

[3Di]

Praktisch alles ist möglich, und genau das haben sie auch getan. Ich habe nie die Notwendigkeit dafür gefunden, auch weil, wenn Sie Text auf den Seiten der bbcode Sie sehen, dass der Text nach oben oder unten je nach Vorrang (oben die auf der linken Seite, unten die auf der rechten Seite) verschoben wird, so dass nur das Video ist in den Raum relativ zu den Beitrag.

Ich finde es auch hässlich zu sehen, aber jetzt habe ich Ihnen etwas gegeben, das ohne Probleme funktioniert, dann werden wir sehen.

Deutsch ist nicht meine Muttersprache, aber ich denke, Sie verstehen mich.

[stefan-franz]

Thank you very much for your excellent help.