Responsive video

[novumfilm]

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

[rudibe]

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.

[makai]

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

Das Template "ce_player" das Video Tag

<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

<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

[Kahmoon]

Sehr cool. Danke!

[agt]

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

<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>