Soporte » WordPress Avanzado » Vídeo responsive con clase «video1» en style.css-Problema al ponerlo en una líne

  • Resuelto mary7370

    (@mary7370)


    Hola,

    Para hacer los videos de Youtube «responsive» y que se adapten bien a cualquier dispositivo, he puesto en la hoja de estilos del tema lo siguiente:
    .video1,
    .widget_video {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
    }
    .video1 iframe,
    .widget_video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    }
    Después sólo tengo que poner en la entrada:
    <div class=»video1″>
    https://youtu.be/4NunlYyHh10 (cualquier vídeo de youtube)
    </div>

    Esto funciona perfectamente, salvo por el pequeño problema de que si tengo que actualizar la entrada, si paso a la pestaña VISUAL y vuelvo a la de HTML, WordPress me cambia automáticamente el texto y lo pone todo en una sola línea, es decir:
    <div class=»video1″>https://youtu.be/4NunlYyHh10</div&gt;

    Y no sé por qué, eso ya no funciona. Al estar en una sola línea no se por qué ya no lo interpreta y en la entrada aparece escrita la URL en vez de poner el vídeo. Así que cada vez que actualizo una entrada tengo que acordarme de volver a la pestaña HTML y volver a ponerlo en tres líneas.
    Lo que no sé es por qué WordPress me cambia el texto que yo he escrito en tres líneas y me lo pone en una. ¿Sabéis si hay forma de que lo que yo he escrito no se modifique?

    La página con la que necesito ayuda: [accede para ver el enlace]

Viendo 10 respuestas - de la 1 a la 10 (de un total de 10)
  • Moderador almendron

    (@almendron)

    Por lo que veo, estás usando «iframes». Así, por ejemplo, en la entrada «Crítica de Misión Imposible Fallout» el código es

    <div class="video1"> <iframe src="https://www.youtube.com/embed/4NunlYyHh10?feature=oembed" allow="autoplay; encrypted-media" allowfullscreen="" width="610" height="343" frameborder="0"></iframe></div>

    Y se perfectamente.

    De todas formas, echa un vistazo a https://cybmeta.com/como-hacer-un-iframe-responsive

    Tal vez te sirva.

    Iniciador del debate mary7370

    (@mary7370)

    Gracias @almendron,

    Disculpa que redunde en el problema, por si no me he explicado bien. Valga por delante que no tengo ni idea de CSS y voy aprendiendo a base de copy&paste de cosas que leo… y de vosotros que me vais enseñando y las meetups.

    Aunque actualmente la entrada se ve bien, si entro a actualizarla, selecciono la pestaña VISUAL del editor y pulso el botón ACTUALIZAR sin tocar una sola línea, la entrada se rompe y en vez del vídeo veo el enlace de youtube escrito. Cuando eso ocurre, vuelvo a la edición de la entrada y en la pestaña HTML veo las tres líneas que indico pero sin los saltos de línea.

    Es decir, yo escribo (y funciona OK):
    <div class=”video1″>;

    </div>;

    Y si entro en VISUAL y actualizo sin tocar nada de la entrada, WordPress me lo cambia por:
    <div class=”video1″>https://youtu.be/4NunlYyHh10</div&gt;

    Y eso no funciona, no sé porqué, porque a mí me parece lo mismo pero en una línea en vez de tres.
    Desde la pestaña HTML vuelvo a ponerle los saltos de línea, pulso el botón ACTUALIZAR y vuelve a verse la entrada correcta.

    Con lo cual es un rollo que cada vez que actualizo una entrada que tiene vídeo tengo que acordarme de terminar siempre pasando por la pestaña HTML y poniendo otra vez los saltos de línea desaparecidos si no quiero que la entrada se rompa.

    Por si sirve de algo, tengo instalado el plugin Tiny MCE Advanced que mejora el editor… a ver si este plugin el que me está haciendo los cambios… igual es una tontería lo que digo. Voy a probar a desactivarlo a ver si WP se sigue comportando igual o no.
    [actualización] Lo he desinstalado y me sigue quitando los saltos de línea y poniendo todo en la misma línea :-(, así que no es cosa del plugin.

    Le he echado un vistazo al enlace que has puesto por si me daba alguna pista pero con mis escasos conocimientos no encuentro qué puedo mejorar en mi entrada para que no se me rompa cada vez que la actualizo. Gracias!

    • Esta respuesta fue modificada hace 5 años, 7 meses por mary7370.
    Iniciador del debate mary7370

    (@mary7370)

    Añado una actualización a mi propia entrada por si ayuda en la investigación. Al ver mi propio texto escrito me he dado cuenta de que cuando lo he escrito en tres líneas ha funcionado y me ha incluido el vídeo (DISCULPAD EL SPAM, porque no era mi intención que el vídeo se viera). Pongo entre comentarios el texto que he escrito:
    /!–<div class=»video1″>–>
    /!–https://youtu.be/4NunlYyHh10–&gt;
    /!–</div>–>

    Como veis en la misma entrada, el mismo texto en una sola línea no ha funcionado porque parece que se hace un lío con el último símbolo «>» que no sabe traducir:
    Lo que yo he escrito (con comentarios):
    <!–<div class=»video1″>https://youtu.be/4NunlYyHh10</div>–&gt;

    Lo que se ve en la entrada:
    <!–<div class=”video1″>https://youtu.be/4NunlYyHh10</div>–&gt;

    Cuando me ocurre en la web, sólo veo la URL del vídeo (lo pongo en comentarios para que el vídeo no se vea):
    <!–https://youtu.be/4NunlYyHh10–&gt;

    Así que parece claro que la instrucción tiene que mantenerse en tres líneas para que funcione. El caso es ¿Por qué WP me quita los saltos de línea y me lo pone todo en una al pasar por la pestaña VISUAL? ¿Sabeis si hay forma de que no se modifique?

    • Esta respuesta fue modificada hace 5 años, 7 meses por mary7370.
    Moderador almendron

    (@almendron)

    Haz lo siguiente en esa misma entrada:

    1) Edita
    2) Cambia <div class="video1">.....</div> por SOLO la URL del vídeo, es decir, https://youtu.be/4NunlYyHh10

    Tienes que hacer salto de párrafo y poner SOLO esa URL. Para saber si es salto de párrafo, te vas a HTML y comprueba que por encima y por debajo queda una línea libre.

    Iniciador del debate mary7370

    (@mary7370)

    Aprovechando tu idea he actualizado una entrada que hice en su momento cuando estuve analizando todas las opciones de video responsive, porque esa en concreto no la había hecho (había puesto la URL tal cual, pero no la de compartir de youtu.be sino la URL que aparece en el navegador para el vídeo).

    https://canalosera.com/noticias/prueba-videos/

    Si la ves desde el móvil los dos primeros vídeos son el caso que tú me indicas (youtu.be directo sin DIV) y la URL del navegador directa. Al menos en mi móvil la miniatura aparece cortada con el móvil en vertical. Cierto es que cuando lo reproduces, el vídeo sí se adapta a la pantalla pero hasta que le das a play queda feo.
    ¿Tú también lo ves mal en tu móvil?

    Los dos últimos vídeos de esa misma entrada son las mismas URLs pero con el DIV «video1» y esos sí se ven con la miniatura completa en vertical, que me parece más elegante.

    Lo que también he probado gracias a tu comentario ha sido a poner un salto de línea entre DIV y el nombre del vídeo. Es decir, en vez de:

    
    <div class=”video1″>
    <!--https://youtu.be/4NunlYyHh10-->
    </div>
    

    Lo he puesto así (sin los comentarios, claro):

    
    <div class=”video1″>
    
    <!--https://youtu.be/4NunlYyHh10-->
    
    </div>
    

    Y ¡OH, SORPRESA! así WP lo respeta y no me lo pone todo en una única línea.
    Así que mi problema inicial se solucionaría así :-D.

    Con toda tu explicación del otro día de todas formas me surgió una duda (no sé si es mejor abrir otro hilo o continuar en éste, si he de abrir otro no dudes en decírmelo). En mi ignorancia supina yo pensaba que no estaba usando <iframe> con esta técnica y me abriste los ojos con tu explicación. ¿Es preferible no usar <iframe> en la web, porque sean anticuados, ralenticen, sean malos para SEO… o no pasa nada por usarlos?

    • Esta respuesta fue modificada hace 5 años, 7 meses por mary7370.
    • Esta respuesta fue modificada hace 5 años, 7 meses por mary7370.
    Moderador almendron

    (@almendron)

    Estoy comprobando en mi propio blog y algo ha cambiado porque ahora, al pasar a HTML y volver luego a visual, ya no aparece la vista previa del video.
    También he comprobado que WordPress «traduce» a «iframe» aún cuando solo pongas la URL.
    También lo he mirado en el móvil y veo todos bien salvo dos con iframe que no aparecen.
    Pon el DIV con la URL del navegador y no te compliques la vida. Aunque lo pongas seguido, debería funcionar.
    Ten en cuenta que lo de ser responsive el video es más cuestión de la plantilla que del propio video, especialmente si son videos recientes.

    Iniciador del debate mary7370

    (@mary7370)

    Ok, pues no mareo más con el tema iframe.

    Sólo para poder cerrar el hilo sin dudas, por lo que comentas de que el DIV y la URL en la misma línea debería funcionar, no sé por qué no funciona. He actualizado la entrada de Prueba Vídeos poniéndolo el primero en la misma línea. Si echas un vistazo ahora a la entrada verás que no lo traduce a iframe sino que se queda con el DIV como si fuera un texto… muy raaaaro.

    En fin, por lo que a mí respecta, lo dejo con el DIV y las líneas en blanco, que así sí funciona y ya está. Muchas gracias por tu ayuda almendron.

    Moderador almendron

    (@almendron)

    ¿Usas el plugin «autoptimize»? Creo que es el responsable del comportamiento anómalo que observas.

    Iniciador del debate mary7370

    (@mary7370)

    Sí, lo utilizo pero sólo desde hace un par de semanas y este comportamiento extraño lleva mucho más tiempo conmigo :-).

    Como de momento le hemos encontrado solución, lo dejamos aquí, que bastantes vueltas te he hecho dar ya. De todas formas, me quedo también con la idea de que el autoptimize puede causar problemas de algún tipo a nivel de código y si en un futuro me surgen otros problemas sin solución puedo investigar por esa vía.

    Muchas gracias por tu ayuda.

    Moderador almendron

    (@almendron)

    De nada. Un saludo.

Viendo 10 respuestas - de la 1 a la 10 (de un total de 10)
  • El debate ‘Vídeo responsive con clase «video1» en style.css-Problema al ponerlo en una líne’ está cerrado a nuevas respuestas.