Soporte » Guías – Resolución de problemas » Como predeterminar las medidas de iframe

  • Resuelto Vic Silver

    (@chulazosxxx)


    Hola,
    pongo habitualmente iframes en mis artículos y me salen siempre con tamaño predeterminado de 300×150. Tengo que andar cambiando siempre las medidas en cada uno. He buscado en las hojas de estilo y en css (no entiendo mucho pero hurgo por allí de vez en cuando) y no he visto ningún sitio donde aparezcan esas medidas como predeterminadas y se puedan modificar. ¿Alguna sugerencia? La medida que quiero poner es 725×450.

Viendo 9 respuestas - 1 de 9 (de 9 total)
  • Podrías indicar en el CSS de tu web exactamente la medida de la siguiente forma:

    
    iframe {
      width: 725px;
      height: 450px;
    }
    

    Pruébalo y dime qué tal te ha ido. En todo caso, ten en cuenta que si estás importanto un iframe desde otro lado (por ejemplo, desde youtube) estos vienen con el tamaño incorporado, con lo cual tendrías que quitárselo para que se cumpla la regla que diste en el CSS.

    No funciona. Lo siento.
    Tenía estas líneas en style.css:

    /* Make sure embeds and iframes fit their containers */
    embed,
    iframe,
    object {
    max-width: 100%;
    }

    Primero añadí lo que dijiste sin cambiar nada y no funcionó, pensé que el 100% ese igual limitaba el tamaño máximo a 300, así que eliminé eso y añadí lo que pusiste y nada, siguen integrándose con 300 de ancho.
    Sin embargo cuando en cada artículo lo cambio manualmente y pongo 725 lo acepta sin problema.

    ¿Y en los iframe de cada vídeo no hay un tamaño especificado?

    Habrá que ver también si ese style.css es el que coge por referencia el iframe.

    En los iframe cada uno tiene su tamaño distinto y al colocarlos todos aparecen como 300×150, y si pongo cualquier cosa como iframe sale también es ese tamaño.
    ¿Cómo puedo saber que css es el que coge el iframe para cambiarlo?

    Para saber qué css coge el iframe tendrías que abrir el Inspector de Chrome (con la tecla F12) y seleccionar el iframe, mirar las propiedades y te va a indicar el archivo css que lo maneja (más info acá: https://developers.google.com/web/tools/chrome-devtools/inspect-styles/?hl=es).

    Lo que te decía del tamaño de los iframe es que si ya vienen con su tamaño especificado entonces no te hará caso al css, para que lo haga tienes que quitarle el tamaño con el que viene el iframe y ahí sí el css será el que lo defina.

    Podrías hacer una captura del código con que viene el iframe para ver si estamos hablando de lo mismo.

    Vale, he mirado lo que dices y el css que controla eso es style.min.css y la orden ahí referente al tamño de iframe predeterminado es esta:

    .site-logo, .widget select, embed, iframe, object, pre {
    max-width: 100%;
    }

    Es la única mención a iframe en todo style.min.css. Hice varias pruebas eliminando el iframe de ahí y añadiendo al final
    .iframe {width:725px;height:450px}
    pero nada, no funciona…

    Creo que lo voy a dejar, porque me da miedo que si modifico ahí el tamaño y fijo uno, luego en móviles y tablets no se adapte al tamaño de pantalla… seguiré cambiándolo manualmente en cada post. Mil gracias por todas las ayudas!

    Vale, perdón por no poderte ayudar a resolverlo, a veces es difícil sin verlo en detalle.

    Eso sí, te comento que no tienes que poner .iframe sino iframe sin el punto, ya que tú quieres elegir el elemento, no una clase (las clases en css se las elige con el punto al principio).

    Saludos!

    Nada, tranquilo!!! Muchas gracias de todas formas. Entiendo que sin ver el código es difícil. Me ha valido de mucho, ya que al menos ya sé dónde está el css y cómo se controla. Mil gracias por la ayuda.

    Un placer. Suerte!

Viendo 9 respuestas - 1 de 9 (de 9 total)
  • Debes estar registrado para responder a este tema.