Video responsive schalten

WICHTIG:
Code 1 = Das Video ist über die ganze Breite geöffnet.
Code 2 = Maximale angezeigte Breite des Videos kann eingestellt werden, Einstellung gilt für alle Videos der Seite mit dem 2. Code

Codes sind unten bei den Mustern zu finden

Damit es bei den einzelnen Videos mit dem Code weiter unten funktioniert, muss man einen Code im CSS: angehängen / eingefügen. Früher war das im termplate.css. Beim Originaltemplate von Joomla 4 "Cassiopeia" musste ich unter css eine neue Datei erstellen. Dazu hier die Infos wie.
z.B. beim Template Helix und solchen, die auf Helix aufgebaut sind, hier die Infos wie.

WICHTIG: Das gilt bei Code 1 und 2. Bei mir hat sich ergeben, dass beide zusammen funktionieren, dass heisst, man kann die Alten Videos so lassen und neue Seiten mit dem Code 2 nutzen usw. ohne gleich alles anpassen zu müssen.

Wenn das Einfügen von iframes nicht funktioniert, der Code nach dem Speicher jeweils wieder weg ist,
im TinyMCE Editor folgendes kontrollieren
Im JCE Editor gab es Probleme, da wurde ein Update gemacht. Wichtig: Bitte die neuste Version, herunterladen: https://www.joomlacontenteditor.net/ (ich empfehle, wenn die Freeversion gefällt, doch die kostenpflichtige Pro Version zu benutezn, Kosten 1x / Jahr, inklusive Updates in dieser Zeit).

Dazu kommt, dass man einen anderen Code benutzen soll (nur beim JCE, nicht beim TinyMCE). zum Code weiter unten
Die alten Code muss man aber nicht ersetzten.
Ich habe bei Tests festgestellt, dass sich der Code nach dem Umstellen von ZinyMCE auf dem JCE und umgekehrt, nach dem öffnen und bearbeiten automatisch immer wieder angepasst hat.

Beim TinyMCE kann es folgendes Problem geben:
Nach der Eingabe mit der Entertaste für eine neue Linie ergibt sich eine Lücke, wenn die klein ist, kann es noch Leerzeilen dazwischen haben <p></p>. Wenn in der Ansicht aber eine grosse Lücke entstanden ist, dann hat sich z.B. dieser Teil eingeschlichen, <p class="responsive-video"> der rote Teil kann gelöscht werden. Der grüne Teil <p> muss bleiben
ACHTUNG, nicht die, die zum Video gehören und gleich aussehen. die falschen stehen unabhängig der Videocode z.B. vor einem Text.

MUSTER:

Tipp: Das Problem entsteht z.B., wenn man YouTube Videos einfügt und den dazugehörenden Text dort kopiert und so einfügt. Besser ist es, diesen zuerst in ein Textpropgramm einzufügen und dort erneut kopieren.

Auf der Seite

Beispiel Original YouTube Code

Den findet man hier:

Ich verwende ein Textprogramm, füge dort den YouTube Code ein und den Responsive Code. Dann kopiere ich den roten Textteil aus dem YouTube Code in den Responsive Code.
ACHTUNG: Dabei kann es passieren, dass es vor und nach dem eingefügten Teil eine Leerstelle gibt, diese unbedingt löschen!

Responsive Code zum kopieren und nutzen:

Muster

Original YouTube Code = nicht responsive.

Trotz Responsive-Code beim Video, aber ohne Code in user.css ist das Video auch fix, jetzt im Editor klein, aber auf der Webseite goss gemäss eingestellter Grösse, maximal Seitenbreite. Ja nach Editor kann es zwischen zwei responsiven Vidoes grosse Abstände haben, weil die Grösse beider Ansicht dann grösser ist, ist also normal. Sollte es dann beim ansehen doch wenig Abstand haben, hat es noch Leerzeilen dazwischen <p> </p> , oder bei grossen Abständen das oben beschriebene Problem.

INFO: Der schwaze Rand um das Video hat nichts mit dem Code zu tun, sondern mit der Qualität der Anzeigengrösse des Originalvideos

Muster Code 1 Anzeige über die ganze Seitenbreite

WICHTIG: zu verwenden mit dem CSS Eintrag zu Code 1 Muster in Helix Template / Original Cassiopeia Template

Muster Code 2 fixe Maximalbreite responsive

WICHTIG: zu verwenden mit dem CSS EIntrag zu Code 2 Muster in Helix Template / Original Cassiopeia Template

Inhalte erstellen Zugriffe: 4405