El problema no debe de ser el video, debe de ser tu tema, aunque hay varios factores a tomar en cuenta.
1- Si tu tema muestra el contenido a 640px sin mas, no puedes hacer que el video se ajuste a otra cosa, tienes que hacer tu tema responsive para que el video pueda seguir esas mismas propiedades.
2- Dices que tu subes los videos, sería bueno saber que videos son, que formato, que tamaño tienen, etc…
3- Como publicas los videos es otra, de tipo embed, url directa, en flash, html5, etc… Así se puede determinar su ahí esta el error.
4- El tema es ArtWork y se puede ver en ?
5- Que plugins haz probado ?
Entre más detalles las cosas, será más sencillo ayudarte.
Saludos.
Iniciador del debate
tincson
(@tincson)
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.
Cambia todos los width: 640px; por width: 100%; y prueba.
Iniciador del debate
tincson
(@tincson)
Gracias Peter, pero lo que puse es el código generado.
El problema es que no tengo ni idea de como lo genera WP, qué archivos estan implicados y todo eso.
Alguien sabe?
gracias
Iniciador del debate
tincson
(@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
De nada Tincson, me alegro de haberte podido ayudar.
