Modificar css dentro de un iframe

Buenas tardes.
Acabo de hacer un pequeña pagina donde inserto algunas publicaciones de facebook, usando la inserción que te da facebook directamente del post.
Ahora bien, la pagina esta echa con boostrap y se adapta segun el ancho del exploraor, esto me trae problemas el ancho del div dentro del iframe (no se porque facebook no le dio un 100% y que cada cual le de el ancho que sea).
Intente modificar el div con cosas como esta:

Código Javascript :

$(frames[document.querySelector("iframe").name]
.window
.document)
.contents()
.find("div")
.css({'width':'100%'});

Pero da el siguiente error.
SecurityError: Blocked a frame with origin "http://localhost:22247" from accessing a cross-origin frame.

Puede alguien darme una mano.

Saludos.

Facebook no tiene la culpa. A los iframe no se les puede dar un ancho en porcentaje.

No puedes acceder al contenido de un iframe a menos que ese contenido esté en el mismo dominio que el contenedor (y viceversa). Es una restricción de seguridad. Lo que intentas hacer bien podría usarse para robar credenciales de una web crítica (como la de un banco), se llama ataque por dominios cruzados ("cross domain attack").