Sixtysixpointsixty-four Sixtysixpointsixty-four - 3 months ago 10
HTML Question

Making iframes act like images

I want an iframe im using to act like an image so it takes up the entire background and is not interactive. It also must not conflict with my current code:

<!DOCTYPE html>
<html>
<head>
<style>
iframe {
-webkit-filter: blur(5px);
filter: blur(5px);
}
</style>
</head>
<body>

<iframe src="http://www.google.com" width="300" height="300"></iframe>

</body>
</html>

Answer

Hope this helps:

.container {
  width: 300px;
  height: 300px;
  position: relative; 
  border-radius: 45%;
  overflow: hidden;
}

.container iframe {
  z-index: 1;
  pointer-events: none;
}

.container .blur {
  border-radius: 45%;
  z-index: 2;
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: rgba(255, 255, 255, 0.5);
}
<div class="container">
  <div class="blur"></div>
  <iframe src="http://gevorg.me/" width="300" height="300" frameborder="0"></iframe>
</div>