Sixtysixpointsixty-four Sixtysixpointsixty-four - 1 year ago 36
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>
iframe {
-webkit-filter: blur(5px);
filter: blur(5px);

<iframe src="" width="300" height="300"></iframe>


Answer Source

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="" width="300" height="300" frameborder="0"></iframe>