Soporte » Guías – Resolución de problemas » Video de la libreria en responsive

  • Resuelto tincson

    (@tincson)


    Hola tod@s,

    Estoy insertando video de la biblioteca a pelo y no consigo que sea responsive. Me lo pone a piñon a 640px.
    El tema es el ArtWork.
    He probado varios plugins, pero no consigo que me funcionen.

    Al no entender como hace WP para publicarlo, no sé donde poner clases o algo para que se adapte.

    Alguien puede ayudar?

    Gracias

Viendo 7 respuestas - 1 de 7 (de 7 total)
  • 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.

    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.

    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

    Hola tincson,

    Aquí te dejo un artículo para solucionar tu problema:
    http://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php

    Y un pluggin por si no consigues hacerlo:
    https://wordpress.org/plugins/responsive-video-embeds/

    Un saludo.

    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.

Viendo 7 respuestas - 1 de 7 (de 7 total)
  • El debate ‘Video de la libreria en responsive’ está cerrado a nuevas respuestas.