Transparent hole in a HTML element

I want to design an HTML element with a transparent hole.

Look at the following code:

HTML

<div class="outer">
  <div class="inner"></div>
</div>

CSS

body {
  background-color: gray;
}
.outer {
  width: 200px;
  height: 200px;
  background-color: blue;
  position: relative;
}
.inner {
  height: 20px;
  width: 20px;
  border-radius: 10px;
  position: absolute;
  left: 90px;
  top: 90px;
  background-color: yellow;
}

http://ift.tt/1YAiiZB

So, via "the hole" I want to see HTML body background.

In this case, this can be "emulated" by setting "hole" element color to gray. But what if a background is an image/video or just unknown?