I'm embedding various content from Issuu on a web page. On page load the embedded content from Issuu is automatically in focus, with visible menus and shadows within the embedded iframe.

This seems to be the standard solution, and there's no way to prevent this with the given embed codes from Issuu. But I would really like to find a way to load the content without it being in focus before the user actually hovers/clicks the embedded area.

As of now the initial focus is only removed if I first click somewhere within the embedded content, and then move my pointer outside of the content.

Is there any way to sort this out with the help of jQuery?

I have tried to solve this by adding the following jQuery code:

$('#issuu_embed').blur();

I also tried to simulate a click on the embedded iFrame, in an attempt to replicate the behaviour mentioned above.

But neither does the trick, and I assume it takes a slightly more sophisticated piece of code to make this work.

Grateful for any hints that could point me in the right direction.

Live CodePen: https://codepen.io/ehrogn/pen/PoEmJKv