CSS - El contenido incrustado se redimensiona y rompe el diseño

Hola a todos:
Mi problema está con un tema de Wordpress y la forma que tiene de mostrar los elementos incrustados. El fallo puede verse en esta dirección: http://instantes.net/2013/12/mis-canciones-favoritas-del-2013/

Para insertar estos elementos en Wordpress se usan los enlaces tal cual, sin especificar las dimensiones. Por ejemplo, para colocar el vídeo solo he utilizado su URL (https://www.youtube.com/watch?v=CTnWc1QyBJQ). En condiciones normales, el vídeo se mostraría a un tamaño mucho menor.

Por alguna razón, los widgets de Youtube, Spotify y Soundcloud se redimensionan sobrepasando el ancho de la zona de contenidos. El tamaño original de estos elementos no es tenido en cuenta (por ejemplo el del la lista de Spotify debería ser 300x380px).



(En el inspector de Chrome: en verde las dimensiones originales, definidas por el propio widget, y en rojo el tamaño que aplica el CSS)

Sin embargo en el código fuente solo aparece esto:



Esto problema solo sucede en este tema (Fukasawa) y creo que está relacionado con la forma de implementar el diseño responsive. He intentado buscar que elemento CSS provoca este comportamiento pero no soy capaz de encontrarlo. Así que cualquier ayuda será bien recibida. Gracias.

Hola Antonio, haz una prueba, pon el tamaño en su contenedor... es decir, crear un <div> con ese tamaño que tu quieres, y pon dentro el <iframe>... creo que siempre se adapta al máximo que puede.

Gracias xve. El caso es que todos elementos los inserto a través del editor de entradas/post de Wordpress sin necesidad de crear ningún div ni pasarle ningún parámetro. Normalmente funciona; por ejemplo, se pone la URL de un vídeo de Youtube/playlist de Spotify y al publicar el post, Worpdress genera (el iframe) todo lo necesario para visualizarlo (sin el fallo que a mí me da). Esto implica que no tengo control sobre los parámetros del iframe.

A través del editor de entradas -usando la vista HTML- he puesto un


pero no ha funcionado. De hecho ni siquiera se muestra el vídeo porque (creo) que el editor de WP limpia el código que el considera inapropiado.

A través de CSS, gracias a un usuario, he podido evitar que los contenidos (Vídeo, lista de Spotify, etc) se desborden, pero siguen ocupando el 100% del ancho y sobrepasando su anchura original (que en el caso de Spotify es de 300px)


Sigue habiendo algo (que es lo que me intriga) que crea un estilo que se aplica directamente al elemento y que establece witdh a 800px. Es algo del tema/plantilla de Wordpress (Fukasawa) porque con otros temas no me pasa.

Lo dicho, muchas gracias por tu interés :)

No conozco wordpress, pero creo que el editor que lleva, te permite ver y modificar el código html del mismo, no?

El código que has puesto esta mal:
Tiene que ser:


En lo que comentas del CSS
Le estas diciendo que la anchura sea el 100%... si en vez de 100% le pones 300px?

Tienes razón el código que he puesto estaba mal. Gracias por el aviso.


Sobre lo de ponerlo a 300px... podría si solo afectase a los widgets de Spotify (cuya anchura es de 300px) pero afecta también al resto de contenidos incrustados, como Youtube o Soundcloud, cuya anchura es mayor a esos 300px. Más que establecer una anchura determinada (ya sea en pixeles o porcentaje) lo que busco es que el sistema no imponga ningún ancho, que respete el ancho que cada elemento tiene establecido por defecto.

Saludos