iframe responsive

delarosan1 · #1 (**permalink**) 16/04/2015, 16:07

Hola, necesito crear un iframe en www.elchupito.es de www.ofermes.com/cafeteriachupito2.html en el que este se vea totalmente igual, de momento casi lo tengo pero fallan 2 cosas...

1, se queda un espacio en blanco en los bordes de la pagina ¿Esto se puede solucionar? ¿Como?

2, Al mirar la página con el movil el iframe no se hace responsive, ¿ Se podria hacer responsive como la original?

Este es el código del iframe

Código:

<html>
<head>
	<style type="text/css">
	.video{
		position: relative; width:100%; height:100%; overflow:hidden;
	}
	.video iframe {
	position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

	}
	</style>
</head>
<body>
	<div class="video">
    	<iframe src="//www.ofermes.com/cafeteriachupito2.html" frameborder="0" allowfullscreen></iframe>
	</div>
</body>
</html>

Muchas gracias

AngelKrak · #2 (**permalink**) 16/04/2015, 17:16

te falta el Meta Viewport en el head para que se vea en moviles ;)

Ponlo dentro de <head></head>

Código HTML:

Ver original<meta name="viewport" content="width=device-width, initial-scale=1">

mbm150 · #3 (**permalink**) 16/04/2015, 18:15

Hola,

para solucionar lo del margen de la web:

Código CSS:

Ver originalhtml, body{
     margin: 0;
     padding: 0;
}

Saludos.

NueveReinas · #4 (**permalink**) 16/04/2015, 19:15

Cita:

Iniciado por AngelKrak

te falta el Meta Viewport en el head para que se vea en moviles ;)

Ponlo dentro de <head></head>

Código HTML:

Ver original<meta name="viewport" content="width=device-width, initial-scale=1">

Hace rato vengo leyendo mucho eso de que la meta-etiqueta Viewport "hace el contenido responsive", pero no lo es todo. Es importante, pero hay más cosas que optimizar.

Hay quien se confunde y cree que con solo ponerle eso ya tiene una web multi-dispositivo, y no es así.

AngelKrak · #5 (**permalink**) 16/04/2015, 22:30

si lose amigo, pero el iframe manda a esta pagina www.ofermes.com/cafeteriachupito2.html y esa pagina tiiene CSS de Bootstrap osea que el Responsive asi que solo le falta la etiiqueta del Viewport para que agarre en Moviles >_<

delarosan1 · #6 (**permalink**) 17/04/2015, 14:20

Hola, lo de los margenes blancos de los laterales se han solucionado pero cuando abro la página con el móvil la página se queda bloqueada ¿podéis echarle un vistazo de por que puede ser?

Gracias

Edito en android va bien, pero en iphone no, ¿Por que puede ser?

AngelKrak · #7 (**permalink**) 17/04/2015, 15:16

como que se queda bloqueada? yo la veo en un "Simulador" y funciona bien tanto en Android como en Iphone >_<

delarosan1 · #8 (**permalink**) 18/04/2015, 13:47

No funciona, por que puede ser???

AngelKrak · #9 (**permalink**) 18/04/2015, 17:13

alguna captura o algo para saber como es el error?

delarosan1 · #10 (**permalink**) 18/04/2015, 23:38

No puedo mandar una captura se quedaba la cabecera de la web y no bajaba, como si no funcionara el scroll pero ya lo he solucionado, os pongo el código por si os puede servir alguna vez, gracias a todos por ayudarme en lo que habéis podido.

http://davidwalsh.name/scroll-iframes-ios