How do I blur an iframe like I blur an image?

Question

Is there a way to blur an iframe for a few seconds using jQuery? It should look something like a gaussian blur, for example in photoshop. (here's an example image , see the right side)

The link being displayed in the iframe is NOT of the same origin, which is why I have been struggling with this. It's not possible to modify the iframe's contents.

Is it possible to apply a blur to an iframe of a different origin only for a few seconds using jQuery?

Answer 1

You can blur any element in CSS 3:

 #iframe-container { -webkit-filter: blur(3px); filter: blur(3px); } 

 <div id="iframe-container"> <iframe src="//example.com"></iframe> </div> 

Answer 2

You can just apply a blur filter via CSS3:

$("iframe").css("filter","blur(5px)")

Don't forget to polyfill the filter attribute. Maybe you can consider to apply a class to the iframe with the appropiate properties as you can see here

Answer 3

iframe.contents().find('body').blur()