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
Liste der Anhänge anzeigen (Anzahl: 1)
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
Liste der Anhänge anzeigen (Anzahl: 1)
Die Responsiveness ist auch auf der Contao Demo unter Chrome for Android (Lollipop) nicht korrekt:
https://community.contao.org/de/atta...7&d=1421237127
Liste der Anhänge anzeigen (Anzahl: 1)
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
Liste der Anhänge anzeigen (Anzahl: 1)
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
Liste der Anhänge anzeigen (Anzahl: 1)
Hi tpk,
Zitat:
Zitat von
tpk
Geht es jetzt?
bei mir Win7-FF sieht Dein Player komisch aus:
Anhang 15109
Grüße
JK
CSS Code Youtube Video Responisive einbetten
Hi,
war heute auf der Suche bezüglich Youtube Responisive einbetten. Keine Ahnung ob das vielleicht schon hier gezeigt wurde. Ich habe folgendes gefunden und es hat zumindest bei mir auf dem Iphone 6 und Ipad Air funktioniert. Auch der Vollbildmodus ging.
Code als CSS Klasse wo das Video eingebettet:
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%;
}
Sollte das eh schon vorgeschlagen worden sein dann könnt ihr gerne diesen Eintrag löschen.
LG
Sandra
