Responsive video

Der Video/audio Player wird im Seitenlayout unter 797px nicht responsive dargestellt, d.h. er bleibt groß und passt sich nicht an. Es scheint daran zu liegen, dass man eine fixe Pixelhöhe des Players angeben muss. Habe bereits die verschiedenen Lösungsansätze probiert, wie die max-height:100% aus dem mediaelement.js zu löschen, keine Verbesserung.

Vielen Dank für eure Hilfe!

lg Ivan

Contao 3.1.5
Die Einbindung eines Videos (.mp4 h.264) über das Inhaltselement Video/Audio funktioniert bei mir nur korrekt, wenn das j_mediaelement-Template nicht ins Seitenlayout eingebunden wird. Mit min-width:100% und height:auto in der CSS für "video" wird es responsive dargestellt.

da ich eben dasselbe Problem hatte hier die Lösung:

Das Template "ce_player" das Video Tag

Code:

---

<video<?php echo $this->size; ?><?php if ($this->poster): ?> poster="<?php echo $this->poster; ?>" preload="none"<?php endif; ?><?php if ($this->autoplay): ?> autoplay<?php endif; ?> controls>
      <?php foreach ($this->files as $file): ?>
        <source type="<?php echo $file->mime; ?>" src="<?php echo $file->path; ?>" title="<?php echo $file->title; ?>">
      <?php endforeach; ?>
    </video>

---

ändern zu

Code:

---

<video width="0" height="0" style="width: 100%; height: 100%;" <?php if ($this->poster): ?> poster="<?php echo $this->poster; ?>" preload="none"<?php endif; ?><?php if ($this->autoplay): ?> autoplay<?php endif; ?> controls>
      <?php foreach ($this->files as $file): ?>
        <source type="<?php echo $file->mime; ?>" src="<?php echo $file->path; ?>" title="<?php echo $file->title; ?>">
      <?php endforeach; ?>
    </video>

---

Dann ist der Player komplett fluid.

Hier dokumentiert:
https://github.com/johndyer/mediaele...esponsive.html

Sehr cool. Danke!

Mit dem FF 48 und Chrome 52 muss der Code code wie folgt geändert werden:

HTML-Code:

---

<video style="width: 100%; height: 100%;" <?php if ($this->poster): ?> poster="<?php echo $this->poster; ?>" preload="none"<?php endif; ?><?php if ($this->autoplay): ?> autoplay<?php endif; ?> controls>
      <?php foreach ($this->files as $file): ?>
        <source type="<?php echo $file->mime; ?>" src="<?php echo $file->path; ?>" title="<?php echo $file->title; ?>">
      <?php endforeach; ?>
    </video>

---