responsive Videos von YouTube in phpWCMS einbinden

[kukki]

Allen bekannt ist die einfache Variante, indem man sich den Code bei YouTube generieren lässt und dann im CP HTML einbindet. Für einen unbeleckten Redakteur, dem die entsprechenden Grundkenntnisse fehlen, ist das der einfachste Weg, ohne die Hilfe eines Webdesigners in Anspruch zu nehmen.

Aufwendiger wird dann schon die Einbindung in ein responsives Layout, da dürfte jeder Fachlaie überfordert sein. Da ich gerade eine solche Website für "Self-Made-Redakteure" auf responsiv umgestellt habe, musste auch eine einfache Lösung her für Videos.

Ganz einfach, man erstellt einfach ein neues HTML-CP und lege das im Verzeichnis template/inc_cntpart/html ab. Ausprobieren - simpel, einfach ohne Probleme, weil der Redakteur wie bisher den YouTube-Code nur einsetzen muss.

Code: Select all

<!-- CSS:
.respo-video {position: relative; padding-bottom: 56%; padding-top: 30px; height: 0; overflow: hidden; }
.respo-video iframe, .respo-video object, .respo-video embed {position: absolute; top: 0;	left: 0; width: 100%; height: 100%; }  -->
[TITLE]<h3>{TITLE}</h3>[/TITLE]
[SUBTITLE]<h4>{SUBTITLE}</h4>[/SUBTITLE]
[HTML]<div class="respo-video">{HTML}</div>[/HTML]

[top]

Hey danke,

das werde ich die nächsten Tage tatsächlich brauchen.

Ich hatte eine ähnliche Lösung vor nicht all zu langer Zeit für eine statische Seite gefunden. So brauche ich mir jetzt keine Gedanken machen wie es einfach in phpwcms integrieren lässt. Ich gebe Rückmeldung ob es problemlos geklappt hat.

Frohe Ostern,
top

[Oliver Georgi]

http://getbootstrap.com/components/#responsive-embed
http://embedresponsively.com/

[kukki]

Zwischenzeitlich wurden weitere Webseiten auf responsives Layout umgestellt und dort wurde das CP HTML5/Flash Media-Player benutzt, das Video wird einmal jährlich gewechselt und auf dem Server abgelegt. Durch das automatische Vorladen und gleichzeitige Abspielen ist dieses CP sehr empfehlenswert.

Und wie bekommt man das ganze Ding responsive

Vorausgesetzt man hat bereits - wie bei mir eine responsive Vorlage als CSS-file, da braucht man nur noch folgende Anweisung als neues CP ablegen - es werden nur die width und height -Angaben aus dem CP überschrieben und schon klapps auch mit der schönen Nachbarin

Code: Select all

<!-- CSS: video {    height: auto !important;  width: 100% !important; } -->
[TITLE]<h3>{TITLE}</h3>[/TITLE]
[SUBTITLE]<h4>{SUBTITLE}</h4>[/SUBTITLE]
<div class="respo-video">{PLAYER}</div>

[photojo]

So, ich greife den Thread nochmal auf.

@ Oliver zu http://getbootstrap.com/components/#responsive-embed
Ich kriege das Autoplay nicht abgestellt?


@ Kukki
Welche Größe für das Video stellst du im CP ein?


Danke.

[kukki]

Größe wie bereits angegeben in CSS (Siehe oben), damit dehnt sich das Teil im umgebenden DIV aus.
Autoplay hat nichts mit responsiv zu tun, das muss man u.a. mit dem

Code: Select all

autoplay=0

im HTML-Code des <iframe> ablegen.

Oder was meinst Du dann

[photojo]

Danke. Klar, autoplay hat nichts mit responsive zu tun. Und das autoplay=0 im iframe-tag klappt eben auch nicht. Daher auch diese Frage. Ich dachte, weil du in letzter Zeit das häufiger verwendet hast, hättest du das gleiche Problem gehabt.

[photojo]

Habe nochmal alles überprüft. Jetzt klappt es.