tincson

Solucionado!

Gracias Javier, tu link me ha sugerido la solución.

La cuestión era simple:

<video width=»100%» src=»http://urlvideo/video.mp4″ controls></video>

Poner los tags video, hacer width 100% y NO poner height=»auto» ni nada.

Salu2

Hola Peter,

Gracias, tienes razón. He dado pocos datos.

1. Se trata de eso que sea responsive. Yo lo cuelgo a 720px de ancho que es el de la vista en descktop. La cuestión es que el código que lo publica no es responsive y eso es lo que debo cambiar. Luego añado el código generado.

2. Es un .mp4 cócdec H265. Sé que para cross-browser debería ponerlo tb en .ogg y otro. El mp4 sí lo muestra chrome, mozilla y safari.

3. La publicación yo diría que es html5. Es la que viene por defecto en WP 3.8.

4. Se trata de un tema libre http://dessign.net/art-works-responsive-theme-free-2013/

5. Plugins que he probado y no me solucionan nada. Incluso a peor.
SZ – Video, Video.js – HTML5 Video Player for WordPress, Video Overlayer, WordPress Canvas – Responsive Videos.

Como al final no uso ninguno de estos sino que WP a pelo, pienso que en algún update se solucionará ¿?

El código generado es:

<div style="width: 640px; max-width: 100%;" class="wp-video">
<div id="mep_0" class="mejs-container svg wp-video-shortcode mejs-video" style="width: 640px; height: 360px;">
<div class="mejs-inner">
<div class="mejs-mediaelement">
<video class="wp-video-shortcode" id="video-632-1" width="640" height="360" preload="metadata" src="http://www.dominio.com/wp-content/uploads/video.mp4">
<source type="video/mp4" src="http://www.dominio.com/wp-content/uploads/video.mp4"/>
<a href="http://www.dominio.com/wp-content/uploads/video.mp4">http://www.dominio.com/wp-content/uploads/video.mp4</a>
</video>
</div>
<div class="mejs-layers">
<div class="mejs-poster mejs-layer" style="display: none; width: 640px; height: 360px;"/>
<div class="mejs-overlay mejs-layer" style="width: 640px; height: 360px; display: none;">
<div class="mejs-overlay-loading">
</div>
<div class="mejs-overlay mejs-layer" style="display: none; width: 640px; height: 360px;">
<div class="mejs-overlay-error"/>
</div>
<div class="mejs-overlay mejs-layer mejs-overlay-play" style="width: 640px; height: 330px;">
<div class="mejs-overlay-button" style="margin-top: -35px;"/>
</div>
</div>
<div class="mejs-controls">
<div class="mejs-button mejs-playpause-button mejs-play">
<button type="button" aria-controls="mep_0" title="Reproducir/Pausar" aria-label="Reproducir/Pausar"/>
</div>
<div class="mejs-time mejs-currenttime-container">
<span class="mejs-currenttime">00:00</span>
</div>
<div class="mejs-time-rail" style="width: 493px;">
<span class="mejs-time-total" style="width: 483px;">
<span class="mejs-time-buffering" style="display: none;"/>
<span class="mejs-time-loaded" style="width: 51.76379081593786px;"/>
<span class="mejs-time-current" style="width: 0px;"/>
<span class="mejs-time-handle" style="left: -7px;"/>
<span class="mejs-time-float">
<span class="mejs-time-float-current">00:00</span>
<span class="mejs-time-float-corner"/>
</span>
</span>
</div>
<div class="mejs-time mejs-duration-container">
<span class="mejs-duration">01:38</span>
</div>
<div class="mejs-button mejs-volume-button mejs-mute">
<button type="button" aria-controls="mep_0" title="Desactivar sonido" aria-label="Desactivar sonido"/>
<div class="mejs-volume-slider" style="display: none;">
<div class="mejs-volume-total"/>
<div class="mejs-volume-current" style="height: 80px; top: 27.9971923828125px;"/>
<div class="mejs-volume-handle" style="top: 25px;"/>
</div>
</div>
<div class="mejs-button mejs-fullscreen-button">
<button type="button" aria-controls="mep_0" title="Pantalla completa" aria-label="Pantalla completa"/>
</div>
</div>
<div class="mejs-clear"/>
</div>
</div>
</div>

Si alguien puede aclararme algo? Muchas gracias.