responsive Video im Hintergrund von eigenem Layoutbereich

**sparklz** · 05.03.2016, 17:31

Schönen Abend in die Runde,

meine Seite ist wie folgt aufgebaut:

vor dem wrapper eine eigener Layoutbereich mit width:100%
Darunter der wrapper mit width:960px, darin content und footer.

im eigenen Layoutbereich liegt die Navigation und ein Logo. Im Hintergrund soll nun in diesem Layoutbereich ein responsives Video laufen. Das Video ist im Dateimanager hinterlegt, youtube ect. entfällt also.

Jetzt habe ich versucht das Video über ein Modul in das Seitenlayout einzubinden:
Video auf eigene Seite gestellt in dem ich es über HTML Inhaltselement

<div class="embed-container">
<iframe src="files/content/videos/960x640/imagefilm.mp4" width="560" height="315" frameborder="0" allowfullscreen="">
</iframe>
</div>
eingebunden habe.

Dann als Modul mit eingenem HTML Code über insert_article bzw. insert_content eingebunden.

Leider wird das Video nicht angezeigt, nur der HTML Code.

Hat jemand eine Idee, wie das funktionieren könnte?
Wäre super!

Grüße, sparklz

**M.Schwarz** · 05.03.2016, 18:19

Binde es mal als HTML5 video ein dann sollte es klappen.

--
Beste Gruesse
Kind Regards

Maximilian Schwarz

**sparklz** · 05.03.2016, 18:58

Danke für Deine Antwort!

Als HTML 5 Video einbinden funktioniert schon, aber wie bekomme ich das responsive bzw. width:100%?
Darum bin ich auf den Versuch mit dem iframe gekommen.

<div class="responsive-video">

</div>

.responsive-video {
position: relative;
padding-bottom: 56%;
padding-top: 30px;
height: 0;
overflow: hidden;
}

.responsive-video iframe,
.responsive-video object,
.responsive-video embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

aber wie bekomme ich in den eigenen Layoutbereich einen iframe mit dem Video?

**M.Schwarz** · 05.03.2016, 19:25

Also wie gesagt ich würde das über HTML5 also <video> einbinden und anschließend setzt du in deiner Stylesheet noch folgendens:

video {
width: 100% !important;
height: auto !important;
}

Dann sollte das Video über die komplette Breite gehen und auch responsive sein, falls jemand die Seite auf dem Smartphone oder ähnliches öffnet

**sparklz** · 05.03.2016, 21:28

nein, das funktioniert bei mir leider nicht.
um das Video wird der mejs player gelegt.
Egal welche Klasse ich anspreche, mit

width: 100% !important;
height: auto !important;

das Video selbst reagiert darauf nicht.