0

El problema es que un estilo se ve aplicado cuando trabajo con el iframe en local, pero al subirlo a internet el iframe no respeta ningun estilo.

Aqui si aplica el estilo (Local) Aqui no aplica el estilo (internet)

el html es este

<div class="iframe-container">
  <iframe width="560" height="315" src="https://www.youtube.com/embed/ilUCwLLdltQ"
                            frameborder="0"
                            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                            allowfullscreen>
  </iframe>
</div>

el CSS es este

.iframe-container{
    width: 95%;
    margin: auto;
}

.iframe-container iframe{
    width: 100%;
}

He estado buscando varias soluciones pero nada me ha funcionado.

3 respuestas 3

0

Comienza por eliminar el width y height que están en tu iframe, ya que es css inline y se lee después de tu archivo css. luego has esto con tu css para que tu video sea adaptable a cualquier pantalla.

.iframe-container {
    width: 95%;
    height: 0;
    overflow: hidden;
    padding: 30px 0 56.25%;
    margin: auto;
    position: relative;
}

.iframe-container iframe, .iframe-container object, .iframe-container embed {
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    position: absolute;
}
<div class="iframe-container">
<iframe src="https://www.youtube.com/embed/ilUCwLLdltQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

0

¿En el servidor de internet tienes subido el css?

Es el primer error que se me ocurre.

O que lo tengas subido y puesto en otra carpeta o con otro nombre, suelen ser errores comunes, nos pasa a todos.

saludos.

0

La respuesta es simple, tu pagina no esta "leyendo" tu css.

Recomendaciones:

  1. verifica mayusculas y minisculas en tu archivo css: recuerda que en localhost estilo.css es capas de leerse con todas sus variables en mayuscula y minuscula (ESTILO.CSS, EStilo.CSS,ESTILO.css,etc,etc); sin embargo en servidor son archivos diferentes ya que las urls son exactas. (si pones css/estilo.css en tu html igual debe estar en tu directorio.
  2. Para verificar si lee tu archivo css da click derecho/ver codigo fuente a la pagina y luego dale click al link donde esta la url de tu css y si carga es porque si esta bien y si no es porque cometiste un error al digitar el nombre de la url.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.