Responsive YouTube Element

Liebe Community,

auch Heute habe ich wieder ein Anliegen an euch & zwar geht's um das Inhaltselement "YouTube" & responsive.
Wenn ich im Backend keine Größe angebe, ist das Video extrem klein & nicht responsive.

Wenn ich 980 x 550 angebe, funktioniert das Video einwandfrei, allerdings nur am Desktop.
Ich habe wirklich alles versucht was ich auf Google gefunden habe, überall width 100%, eingetragen, versucht die mediaelement.js zu bearbeiten, etc. aber ich finde einfach keine Lösung

Hier der Link zu einer Unterseite:
http://goo.gl/LtMgBU

BITTE kann mir einer sagen, wie ich es schaffe, des Player responsive zu bekommen?
Leider ist es nicht möglich ein anderes Inhaltselement zu nehmen, da der Kunde bereits unzählige Beiträge mit Videos via Element => YouTube implementiert hat!

Danke vorab für eure Bemühungen

Contao verwendet für das Video Element MediaElement.js und MediaElement.js benutzt leider absolute Pixel Angaben, daher ist es etwas aufwändiger diesen Player responsive zu machen. Aber hier gibt es eine Anleitung, mit der du es schaffen könntest den MediaElement.js player doch responsive zu bekommen, mit ein paar CSS overrides: http://css-tricks.com/rundown-of-han...lexible-media/ (unter "Using MediaElements.js?"). Probier das mal aus und zeig das Ergebnis dann her, würde mich auch interessieren ;).

Zitat:

---

Zitat von Spooky

Contao verwendet für das Video Element MediaElement.js und MediaElement.js benutzt leider absolute Pixel Angaben, daher ist es etwas aufwändiger diesen Player responsive zu machen. Aber hier gibt es eine Anleitung, mit der du es schaffen könntest den MediaElement.js player doch responsive zu bekommen, mit ein paar CSS overrides: http://css-tricks.com/rundown-of-han...lexible-media/ (unter "Using MediaElements.js?"). Probier das mal aus und zeig das Ergebnis dann her, würde mich auch interessieren ;).

---

Hey Spooky,

danke für deine Rückmeldung - Grundlegend scheint das Tutorial zu funktionieren, den am Desktop ist das Video nun responsive (siehe Browser-Skalierung).
Auch im mobilen Emulator (F12) funktioniert's einwandfrei am Desktop - Am Handy selbst ist es allerdings buggy (iPhone5 + Samsung Galaxy S5).
Habe dir einen Screenshot im Anhang gepackt vom Smartphone - Habe auch versucht folgende CSS noch zu ergänzen:

VORHER (lt. Tutorial):
.mejs-mediaelement video {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100% !important;
max-width: 100%;
}

MEINE ERGÄNZUNGEN:
.mejs-mediaelement video {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100% !important;
max-width: 100%;
height: auto !important;
max-height: 100% !important;
}

funktioniert aber trotzdem nicht - Ideen?
Hier nochmals der Link: http://goo.gl/LtMgBU

Danke & liebe Grüße

SCREENSHOT:
Anhang 14769

Hm, da kann ich momentan auch nicht helfen, seit dem Android L update kann ich mit meinem Nexus 5 nicht mehr remote debuggen... :mad:

Moin Sight,

ich hatte vor ein paar Tagen genau das gleiche Problem und bei mir hat es mit deinen Änderungen weder auf dem iPhone noch auf dem Desktop funktioniert. Ich habe mir dann noch mal den erwähnten Artikel auf css-tricks angesehen und meine Styles entsprechend ergänzt:

Code:

---

.mejs-container {
        width: 100% !important;
        height: auto !important;
        padding-top: 57%;
}
.mejs-overlay, .mejs-poster {
        width: 100% !important;
        height: 100% !important;
}
.mejs-mediaelement video,
.mejs-mediaelement .me-plugin,
.mejs-mediaelement embed {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100% !important;
        height: 100% !important;
}

---

Erst nachdem ich .me-plugin und embed ebenfalls mit den Styles versehen hatte, wurde das Video korrekt skaliert. Du kannst dir das Ergebnis hier ansehen.

Grüße,
Dennis

Hi,

ich habe

HTML-Code:

---

.mejs-container {
        width: 100% !important;
        height: auto !important;
        padding-top: 57%;
}
.mejs-overlay, .mejs-poster {
        width: 100% !important;
        height: 100% !important;
}
.mejs-mediaelement video,
.mejs-mediaelement .me-plugin,
.mejs-mediaelement embed {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100% !important;
        height: 100% !important;
}

---

einfach mal probeweise ans Ende meiner externen CSS-Datei gesetzt und im YouToube-Element die Felder für die Größe leer gelassen. Das hilft aber nix. Muss ich das an einer anderen Stelle machen?

Bei mir hat das gereicht. Es hat auch keine Rolle gespielt, ob ich die Werte eintrage oder leer lasse.
Hast du die Seite schon online, dass ich mir das mal angucken kann?

Grüße,
Dennis

In der Contao Demo ist eine responsive Lösung.

http://demo.contao.org/en/media-elements.html

https://github.com/contao/official-d...sponsive.html5

@ joe

Wo fügt man den Code ein (mehr als das ist es ja nicht, oder?)

PHP-Code:

---

<?php
$this->extend('ce_player');
if ($this->isVideo)
{
$this->size .= ' style="width: 100%; height: 100%;"';
}

---

Und dann das Youtube-Element von Contao verwenden?

Jetzt ist die Seite online

http://2014.afrank-ibb.de/index.php/youtube.html

Hab noch keine Lösung.

Um bei dem Beispiel der COD zu bleiben, trag mal als erstes wieder Werte für das Video ein. Dann sollte es doch erstmal wieder angezeigt werden, oder?

640 x 480 ...

Hi denniserdmann,

Zitat:

---

Zitat von denniserdmann

Um bei dem Beispiel der COD zu bleiben, trag mal als erstes wieder Werte für das Video ein. Dann sollte es doch erstmal wieder angezeigt werden, oder?

---

was meinst Du mit COD?

Bei mir mir hat das CSS auch nicht richtig funktioniert :-(

Grüße aus Ludwigsburg
Jochen Kubik

Hallo,

COD = Contao Official Demo unter demo.contao.org ;-)

fg
nicky


Gesendet von iPad mit Tapatalk

Ich frag zur Sicherheit nochmal:

bei der COD muss, wenn ich joe richtig verstehe, dieser Code verwendet werden:

Code:

---

<?php
$this->extend('ce_player');
if ($this->isVideo)
{
$this->size .= ' style="width: 100%; height: 100%;"';
}

---

Nur wohin damit?

Das kommt in das Template des Players.
Dieser Link hier sollte Dir alle Fragen beantworten:

https://github.com/contao/official-d...sponsive.html5

Bitte bedenke, dass diese Anpassung für Contao 3.3 und 3.4 gemacht ist und nur teile des Temlates überschrieben werden.

Hi,
den Link kenn ich, aber ich werd nicht schlau draus. Gibt da ja keine Anleitung, oder übersehe ich die? Ich verwende 3.4. Wo muss ich den Code denn gemau einfügen? Das Template ce_player erstellen, in ce_player_responsive.html5
umbenennen und den Code an das Ende der Datei? Wo mache ich das Template dann bekannt? Oder Template nicht umbenennen?

Hallo TPK,
Contao Standard ist "original benannte" Temlates mit denen aus dem Ordner templates/official-demo zu überschreiben.
Templates die umbenannt wurden, mußt Du einem Inhaltselement erst "von Hand" zuweisen, bzw. diese damit bekannt machen.

Im Falle der Demo ist dies im Inhaltselement "Youtube" unter Template-Einstellungen -> Individuelles Template geschehen.

Nachschauen kannst Du das zB in der online Demo oder einer beliebigen Koie der COD.

Hallo Leute,
ich muß hier TPK mal unterstützen:
Es ist sicherlich für Leute, die php im Blut haben, eine doofe Frage, wo denn der o.g. Code hin kommt. Aber es gibt hier Leute die mit php aber auch gar nix am Hut haben, so wie ich, und da hilft es dann halt wenig auf das GitHub zu verlinken und zu sagen da stünde alles drin. Leider steht da auch nur der Codeschnipsel, wo dieser im template hin kommt, erschließt sich mir daraus überhaupt nicht. Es wäre freundlich und hilfreich es einfach zu verraten! Wie ich mit meinen sehr dürftigen php Kenntnissen zu erkennen glaube fehlt an o.g. code sogar das Endtag "?>" oder? Also müßte es irgendwo mitten rein?
Wie man ein Template kopiert und updatesicher macht ist eine andere Sache, hier geht's erst mal um den php code der da reingewurstelt werden soll!

Also lasst und nicht dumm sterben ;-)

Grüße aus Ludwigsburg
Jochen Kubik

Äh.. ihr habt da den link zum kompletten Template bekommen. Mehr ist nicht nötig.
Da wird das normale Template 'ce_player' Extended (Erweitert) um das was in der if-Anweisung steht.
Das ganze hat als Template dann ce_player_responsive, welches man jetzt bei jedem Template auswählen kann.
Für alle die es gerne noch genauer haben wollen: Schaut euch doch die Demo an? Da solltet ihr das dann auch genau so sehen.

Viele Grüße

PS: Das abschließende ?> ist nicht nötig (und hat in der Vergangenheit eher für Probleme gesorgt)!

Hi MacKP,
vielen Dank für Deine Erklärung, das ist für den php Laien schon verwiunderlich, wenn 21 lange Zeilen code plötzlich durch 6 kurze ersetzt werden, und das das Gleiche sein soll :-)

Der Player ist auf dem Desktop jetzt responsive, leider auf dem Android (FF Beta, Chrome) nicht :-(
Das macht die ganze Sache fast obsolet.

Hier ein Link zum Test

Trotzdem nochmals Vielen Dank für Deine Hilfe!!


Grüße aus Ludwigsburg
Jochen Kubik

Zitat:

---

Zitat von kubjo

Der Player ist auf dem Desktop jetzt responsive, leider auf dem Android (FF Beta, Chrome) nicht :-(
Das macht die ganze Sache fast obsolet.

---

Ist das mit der Online Demo auch so, das es da nicht geht?
Hast du auch das CSS der Online-Demo kopiert?

Viele Grüße

Hi MacKP,
da hat's 19 CSS Dateien drin verwurstelt, ich habe jetzt via firebug 624 Zeilen CSS die vermutlich auf das Video verweisen rauskopiert, mal sehen, ob's was nützt ;-)

Grüße aus Ludwigsburg
Jochen Kubik

Die Responsiveness ist auch auf der Contao Demo unter Chrome for Android (Lollipop) nicht korrekt:

https://community.contao.org/de/atta...7&d=1421237127

So, jetzt ich nochmal ;-)

Habe die DemoSeite mal auf dem Androiden geöffnet, und es zeigen sich leider Ungereimtheiten, wie Spooky gerade auch gezeigt hat. (wollte eben auch ein Screenshot machen, DANKE speedy spooky ;-)
Im Querformat ist es noch schlechter, das ist das Video verschoben in einer schwarzen Kiste. So habe ich es mit dem Template und dem kopierten CSS (in erinnere 624 Zeilen) :eek: mit meiner Seite auch hin bekommen.


Grüße aus Ludwigsburg
Jochen Kubik

der Vollständigkeit halber:

Der Fehler ist auch auf iOS-Geräten zu beobachten
Anhang 15098

Das von mir erwähnte Beispiel hingegen funktioniert auch unter iOS.
Kann das mal jemand mit einem Android Smartphone überprüfen?

Grüße,
Dennis

Hallo Dennis,
Dein Video funktioniert bei mir unter Android 4.4.2 auf FF.
Werd das nochmal ausführlicher Testen und dann Rückmeldung geben.

Hi Dennis,

auf dem LG G3 mit Android 5.0 FF Beta alles einwandfrei!
Anhang 15099

Auc im Querformat OK!

Was machen die anders?


Grüße aus Ludwigsburg
Jochen Kubik

Da wären wir wieder bei Post #5 (siehe weiter oben).

Bei mir haben die genannten Anweisungen geholfen, also

Code:

---

/*sorgt dafuer, dass der zweitäußerste Container immer das Seitenverhaeltnis 16:9 behaelt */
.mejs-container {
        width: 100% !important;
        height: auto !important;
        padding-top: 57%;
}

/* sorgt dafuer, dass das Vorschaubild und der Play-Button wieder mittig zentriert sind */
.mejs-overlay, .mejs-poster {
        width: 100% !important;
        height: 100% !important;
}

/* sorgt dafuer, dass das Video-Element, der übergeordnete DIV-Container vom Flash-Video
und das Flash-Video richtig skaliert werden */
.mejs-mediaelement video,
.mejs-mediaelement .me-plugin,
.mejs-mediaelement embed {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100% !important;
        height: 100% !important;
}

---

Diesmal mit Kommentaren, zur besseren Nachvollziehbarkeit. Ich muss dazu sagen, dass ich mein .ce_player-Template, nicht angefasst habe. Es sollte aber (nicht geprüft) auch mit den Anpassungen von Joe gehen und evtl. spart man sich dann ein paar Zeilen CSS.

Ähm,

also ich hab jezt auf meiner Seite

http://2014.afrank-ibb.de/youtube.html

das Video mit ce_player_responsive eingebunden. Das fluppt bei mir tadellos auf dem WinPhone (Nokia 925). Hab da noch bei Größe 640 x 480 drin

Aber schrägerweise verrutscht das runde, weiße Play-Symbol auf der Demo-Seite im Nokia

http://demo.contao.org/en/media-elements.html

nach oben links (wird halb abgeschnitten). Auf meiner sitzt es tadellos.

Durch den zeitgleich erschienenen Post von denniserdmann ist mir klar geworden, dass es bei mir die Mischung aus seinem CSS und dem Template macht. Ich hatte bei obigem Post das CSS noch drin und vergessen. Wenn ich jetzt den Durchblick nicht völlig verloren habe, ist es so: Das CSS alleine reißt es nicht, das Template alleine auch nicht, aber zusammen funkt's.

Zitat:

---

Zitat von tpk

Ähm,

also ich hab jezt auf meiner Seite

http://2014.afrank-ibb.de/youtube.html

das Video mit ce_player_responsive eingebunden.

---

Für iOS und Android scheint Dir noch der Meta-Tag viewport zu fehlen. Dort wird momentan noch die Desktop-Version angezeigt.

Zitat:

---

Für iOS und Android scheint Dir noch der Meta-Tag viewport zu fehlen. Dort wird momentan noch die Desktop-Version angezeigt.

---

Tausend Dank, meine erste Seite mit 3.4 und für WinPhone habe ich ein spezielles Script drin ...
Geht es jetzt?

Zitat:

---

Zitat von tpk

Tausend Dank, meine erste Seite mit 3.4 und für WinPhone habe ich ein spezielles Script drin ...
Geht es jetzt?

---

Gute Nachricht: Die Seite ist nun auch unter iOS und Android (nicht geprüft, aber sollte eigentlich) responsive. Das Vorschaubild wird verkleinert, der Play-Button ist mittig.

Schlechte Nachricht: Obwohl alles richtig aussieht, lässt sich das Video bei mir leider nicht abspielen. Vorschaubild verschwindet, Play-Buton bleibt aber stehen und der Hintergrund ist nur schwarz. Normalerweise würde das Video unter iOS dann im Vollbild-Modus abspielen. Bei Dir irgendwie nicht. Bin gerade mit meinem Latein am Ende, weil es in Chrome (emuliertes iPhone) das Video abspielt.

Vielleicht hat noch jemand eine Idee.

Grüße,
Dennis

Hi Leute,
also langsam nähern wir uns einer praktikablen Lösung.
Leider habe ich noch kleine Probleme:

-Android FF Beta/Chrome: Der große PLAY Button liegt irgendwie über dem gesamten Video, so daß man z.B. nicht auf den Vollbild button tippen kann.
-Win7 FF: Auch hier Problem den Vollbild button zu aktivieren, aber es geht ab und zu
-Android FF Beta/Chrome: Der Play button ist super empfindlich und schaltet bei einer "normalen" Berührung gerne 2x von Pause auf Play und wieder zurück
-Android FF Beta/Chrome: Wenn man von Hoch auf Querformat wechselt, passt sich zwar das Video in der Größe an, der Fortschrittsbalken bleibt klein.

Das Alles könnt ihr hier angucken

Grüße
JK

Hi tpk,

Zitat:

---

Zitat von tpk

Geht es jetzt?

---

bei mir Win7-FF sieht Dein Player komisch aus:

Anhang 15109

Grüße
JK

Zitat:

---

bei mir Win7-FF sieht Dein Player komisch aus:

---

Moin,

das war Baustelle und nicht ein, sondern zwei Player :-)

Ich war mal kreativ und hab jetzt gerade folgendes online (der untere Player):

ce_player_iframe.html5

Code:

---

<?php $this->extend('block_searchable'); ?>

<?php $this->block('content'); ?>

<div class="elastic-video">
  <iframe src="http://www.youtube.com/embed/<?php echo $this->youtube; ?>" frameborder="0" allowfullscreen></iframe>
</div>

<?php $this->endblock(); ?>

---

Zusammen mit diesem CSS macht sich das bei meinen Geräten gut:

Code:

---

.elastic-video {
        position: relative;
        padding-bottom: 55%;
        padding-top: 15px;
        height: 0;
        overflow: hidden;
}
.elastic-video iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
}

---

Das div um den iframe bringt diesem responsive Manieren bei.

Zitat:

---

Zitat von kubjo

Hi Leute,
also langsam nähern wir uns einer praktikablen Lösung.
Leider habe ich noch kleine Probleme:

-Android FF Beta/Chrome: Der große PLAY Button liegt irgendwie über dem gesamten Video, so daß man z.B. nicht auf den Vollbild button tippen kann.
-Win7 FF: Auch hier Problem den Vollbild button zu aktivieren, aber es geht ab und zu
-Android FF Beta/Chrome: Der Play button ist super empfindlich und schaltet bei einer "normalen" Berührung gerne 2x von Pause auf Play und wieder zurück
-Android FF Beta/Chrome: Wenn man von Hoch auf Querformat wechselt, passt sich zwar das Video in der Größe an, der Fortschrittsbalken bleibt klein.

Das Alles könnt ihr hier angucken

Grüße
JK

---

Ich habe leider auch das Prob mit dem Vollbild !!

Habe vom Code her die Kombination aus der Contao demo "ce_player_responsive.html5"

Code:

---


 

<?php

 
 $this->extend('ce_player');

 
if ($this->isVideo)
 {
        $this->size .= ' style="width: 100%; height: 100%;"';
 }

---

und dem hier:

Code:

---

/*sorgt dafuer, dass der zweitäußerste Container immer das Seitenverhaeltnis 16:9 behaelt */
.mejs-container {
        width: 100% !important;
        height: auto !important;
        padding-top: 57%;
}

/* sorgt dafuer, dass das Vorschaubild und der Play-Button wieder mittig zentriert sind */
.mejs-overlay, .mejs-poster {
        width: 100% !important;
        height: 100% !important;
}

/* sorgt dafuer, dass das Video-Element, der übergeordnete DIV-Container vom Flash-Video
und das Flash-Video richtig skaliert werden */
.mejs-mediaelement video,
.mejs-mediaelement .me-plugin,
.mejs-mediaelement embed {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100% !important;
        height: 100% !important;
}

---

Contao 3.42 is drauf.

Kann es sein, dass man auf der LTS 3.2.20 gar keine Auswahl zum Player Template hat? Jedenfalls fehlt sie bei mir :eek:

Das ist gut möglich, bei vielen Elementen wurde die Templateauswahl erst in 3.3 eingeführt. Was immer geht, ist natürlich das Template ce_player.html5 im Template-Ordner des verwendeten Themes in veränderter Form abzulegen. Das wird dann allerdings global für alle Instanzen des Players verwendet.

Falls das nicht gewünscht ist, geht immer noch dieser uralte Trick: http://de.contaowiki.org/Eigene_Temp...C3%B6glichkeit