El problema no esta en el iframe
, sino en el html que estás cargando.
Al intentar cargarlo en mi navegador, me está dando este mensaje de error (mirando la consola, F12):
Mixed Content: The page at 'https://82e7f306a6f428b6dcf2107238d0152af2d3013e-www.googledrive.com/host/0Bz6Br9MUV3OCVzV6cUtsQU5DTVE' was loaded over HTTPS, but requested an insecure stylesheet 'http://www.googledrive.com/host/0Bz6Br9MUV3OCdlJVS2RlR0gzMWc'. This request has been blocked; the content must be served over HTTPS.
Lo que este error significa es que el navegador no quiere cargar el CSS por que este es cargado con un protocolo menos seguro. Debes tener en cuenta que no importa si lo cargas con http, por que es redireccionado automaticamente por google drive para utilizar https.
Solución:
Deberías modificar el el html para utilizar la notación de protocolo relativo, en lugar de usar:
<link rel="stylesheet" type="text/css"
href="http://www.googledrive.com/host/0Bz6Br9MUV3OCdlJVS2RlR0gzMWc" />
Utiliza:
<link rel="stylesheet" type="text/css"
href="//www.googledrive.com/host/0Bz6Br9MUV3OCdlJVS2RlR0gzMWc" />
Como puedes ver, lo que hay que eliminar es http:
y dejar que la URL comience a partir de las dos barras //
.
Esto hará que sin importar el protocolo con que cargues la página, el CSS se cargará utilizando el mismo protocolo.
Ejemplo
Aquí te dejo el ejemplo funcionando, este archivo lo subí a mi propio Google Drive
e hice la modificación que te dije arriba.
<iframe width="100%" height="400" src="http://www.googledrive.com/host/0B7yVPJJfN8f0VWZNbFdnc2lHSnM"></iframe>