如何在iframe上创建模糊效果？

Question

body {
  margin: 0;
}

iframe {
  display: block;
  background: #000;
  border: none;
  height: 100vh;
  width: 100vw;
}

.blur {
  width: 100%;
  height: 100%;
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
  width: 100px;
  height: 100px;
  background-color: #ccc;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="blur"> </div>
<iframe class="blur" src="x"></iframe>

我正在寻找一种模糊iframe的方法。

我一直在搜寻它，却找不到任何东西。我尝试执行的方法是创建一个div并将其模糊并放在顶部。但是，它们并没有彼此重叠。

预先感谢