Title: Vídeo responsive con clase «video1» en style.css-Problema al ponerlo en una líne
Last modified: 8 de agosto de 2018

---

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

 *  Resuelto [mary7370](https://es.wordpress.org/support/users/mary7370/)
 * (@mary7370)
 * [hace 8 años, 2 meses](https://es.wordpress.org/support/topic/video-responsive-con-clase-video1-en-style-css-problema-al-ponerlo-en-una-line/)
 * 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](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](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](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fes.wordpress.org%2Fsupport%2Ftopic%2Fvideo-responsive-con-clase-video1-en-style-css-problema-al-ponerlo-en-una-line%2F%3Foutput_format%3Dmd&locale=es_ES)
   para ver el enlace]_

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

 *  Moderador [almendron](https://es.wordpress.org/support/users/almendron/)
 * (@almendron)
 * [hace 8 años, 2 meses](https://es.wordpress.org/support/topic/video-responsive-con-clase-video1-en-style-css-problema-al-ponerlo-en-una-line/#post-78169)
 * 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](https://cybmeta.com/como-hacer-un-iframe-responsive)
 * Tal vez te sirva.
 *  Iniciador del debate [mary7370](https://es.wordpress.org/support/users/mary7370/)
 * (@mary7370)
 * [hace 8 años, 2 meses](https://es.wordpress.org/support/topic/video-responsive-con-clase-video1-en-style-css-problema-al-ponerlo-en-una-line/#post-78171)
 * Gracias [@almendron](https://es.wordpress.org/support/users/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](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 8 años, 2 meses por [mary7370](https://es.wordpress.org/support/users/mary7370/).
 *  Iniciador del debate [mary7370](https://es.wordpress.org/support/users/mary7370/)
 * (@mary7370)
 * [hace 8 años, 2 meses](https://es.wordpress.org/support/topic/video-responsive-con-clase-video1-en-style-css-problema-al-ponerlo-en-una-line/#post-78174)
 * 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](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](https://youtu.be/4NunlYyHh10</div>–&gt);
 * Lo que se ve en la entrada:
    <!–<div class=”video1″>[https://youtu.be/4NunlYyHh10</div>–&gt](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](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 8 años, 2 meses por [mary7370](https://es.wordpress.org/support/users/mary7370/).
 *  Moderador [almendron](https://es.wordpress.org/support/users/almendron/)
 * (@almendron)
 * [hace 8 años, 2 meses](https://es.wordpress.org/support/topic/video-responsive-con-clase-video1-en-style-css-problema-al-ponerlo-en-una-line/#post-78178)
 * 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](https://es.wordpress.org/support/users/mary7370/)
 * (@mary7370)
 * [hace 8 años, 2 meses](https://es.wordpress.org/support/topic/video-responsive-con-clase-video1-en-style-css-problema-al-ponerlo-en-una-line/#post-78261)
 * 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/](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 8 años, 2 meses por [mary7370](https://es.wordpress.org/support/users/mary7370/).
    -  Esta respuesta fue modificada hace 8 años, 2 meses por [mary7370](https://es.wordpress.org/support/users/mary7370/).
 *  Moderador [almendron](https://es.wordpress.org/support/users/almendron/)
 * (@almendron)
 * [hace 8 años, 2 meses](https://es.wordpress.org/support/topic/video-responsive-con-clase-video1-en-style-css-problema-al-ponerlo-en-una-line/#post-78269)
 * 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](https://es.wordpress.org/support/users/mary7370/)
 * (@mary7370)
 * [hace 8 años, 2 meses](https://es.wordpress.org/support/topic/video-responsive-con-clase-video1-en-style-css-problema-al-ponerlo-en-una-line/#post-78300)
 * 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](https://es.wordpress.org/support/users/almendron/)
 * (@almendron)
 * [hace 8 años, 2 meses](https://es.wordpress.org/support/topic/video-responsive-con-clase-video1-en-style-css-problema-al-ponerlo-en-una-line/#post-78302)
 * ¿Usas el plugin «autoptimize»? Creo que es el responsable del comportamiento 
   anómalo que observas.
 *  Iniciador del debate [mary7370](https://es.wordpress.org/support/users/mary7370/)
 * (@mary7370)
 * [hace 8 años, 2 meses](https://es.wordpress.org/support/topic/video-responsive-con-clase-video1-en-style-css-problema-al-ponerlo-en-una-line/#post-78357)
 * 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](https://es.wordpress.org/support/users/almendron/)
 * (@almendron)
 * [hace 8 años, 2 meses](https://es.wordpress.org/support/topic/video-responsive-con-clase-video1-en-style-css-problema-al-ponerlo-en-una-line/#post-78358)
 * 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.

## Etiquetas

 * [responsive](https://es.wordpress.org/support/topic-tag/responsive/)
 * [videos](https://es.wordpress.org/support/topic-tag/videos/)

 * En: [WordPress Avanzado](https://es.wordpress.org/support/forum/wp-avanzado/)
 * 9 respuestas
 * 2 participantes
 * Última respuesta de: [almendron](https://es.wordpress.org/support/users/almendron/)
 * Última actividad: [hace 8 años, 2 meses](https://es.wordpress.org/support/topic/video-responsive-con-clase-video1-en-style-css-problema-al-ponerlo-en-una-line/#post-78358)
 * Estado: resuelto

## Debates

### Debates populares

### Debates sin respuestas

### Debates que no son soporte

### Debates resueltos

### Debates no resueltos

### Todos los debates