Responsive YouTube Element

[doggidog13]

/*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;
}

Habe das übernommen, responsive ist es auch, aber das Vollbild geht leider nicht, geht das bei euch anderen denn reibungslos?

[denniserdmann]

In Chrome und Safari hatte ich keine Probleme mit dem Vollbildmodus. Andere Browser habe ich nicht getestet. Läuft denn das Video von der Wunderdogs-Website bei Dir im Vollbildmodus?

[doggidog13]

In Chrome und Safari hatte ich keine Probleme mit dem Vollbildmodus. Andere Browser habe ich nicht getestet. Läuft denn das Video von der Wunderdogs-Website bei Dir im Vollbildmodus?

Also ich teste das mit einem Samsung Galaxy S5, da funktioniert es nicht, auch deine Seite nich, wenn ich auf das Vollbild klicke, wird immer pausiert.
FF geht es überall problemlos.

[denniserdmann]

ah okay, ich dachte, deine Frage hätte sich nur auf den Desktop bezogen. Das iPhone zeigt das Video immer im Vollbild. Auf dem iPad funktioniert der Vollbild-Button weder in Safari noch Chrome. Aber es gibt ein Issue beim mediaelement.js Github, dass dieses Problem beschreibt (link gerade nicht zur Hand). Vielleicht also ein Problem mit einer älteren Version von mediaelement.js?

[doggidog13]

Ich weiß nicht welche version das ist und auch nicht wie ich es updaten kann.
Wähle es ja nur im Layout aus.

Gesendet von meinem SM-G900F mit Tapatalk

[doggidog13]

habe es nun über die Erweiterung [InlineMedia] erledigt.

[Grisu]

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:

.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

[be-tina]

Der Post ist zwar schon eine Weile her. Ich hatte aber gerade das Problem, dass ich mein YouTube Video responsive machen musste.

Die Tipps hier haben mir sehr weitergeholfen. Es hatte aber nicht ganz geklappt.

Geklappt hat am Ende die Ergänzung von max-width und das Löschen der height:

.mejs-mediaelement video,
.mejs-mediaelement .me-plugin,
.mejs-mediaelement embed {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100% !important;
    max-width: 100%;
}

Den Overlay-Button habe ich noch ausgeblendet, weil der über dem You-Tube Button lag und unschön aussah:

.mejs-overlay-button {
    display:none;
}

Die anderen CSS-Regeln von den Tipps hier habe ich deaktiviert. Die waren bei mir nicht nötig.

[Burek]

Hall be-tina, dein Code hat bei mir auch funktioniert, danke!