Present iFrame In A Browser Mockup – mockframe.js

mockframe.js is a JavaScript to make your iframe content look like an app or site screen in a minimal browser mockup.

How to use it:

1. Download the package and load the main script right before the closing body tag.

<script src="script.js"></script>

2. Embed an iframe into your document.

<iframe src="https://www.cssscript.com">
</iframe>

3. Initialize the library and done.

newMockFrame();

4. Override the default styles of the browser mockup.

iframe {
  width: 100%;
  height: 100%;
  border: none;
  border-bottom-left-radius: 9px;
  border-bottom-right-radius: 9px;
  display: block;
}
.window {
  border-radius: 9px;
  background-color: white;
  width: 100%;
  min-height: 100%;
  box-shadow: 0 0px 1.2px rgba(0, 0, 0, 0.021), 0 0px 2.7px rgba(0, 0, 0, 0.031),
    0 0px 4.6px rgba(0, 0, 0, 0.038), 0 0px 6.9px rgba(0, 0, 0, 0.044),
    0 0px 10px rgba(0, 0, 0, 0.05), 0 0px 14.2px rgba(0, 0, 0, 0.056),
    0 0px 20.1px rgba(0, 0, 0, 0.062), 0 0px 29.2px rgba(0, 0, 0, 0.069),
    0 0px 45px rgba(0, 0, 0, 0.079), 0 0px 80px rgba(0, 0, 0, 0.1);
}
.header {
  margin: 0px;
  background: #e8e8e8;
  border-top-left-radius: 9px;
  border-top-right-radius: 9px;
  height: 12px;
  padding: 12px;
}
.mockup-button {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-block;
}
.red {
  background-color: #ff5f56;
}
.yellow {
  background-color: #ffc343;
  margin-left: 3px;
}
.green {
  background-color: #32a852;
  margin-left: 3px;
}

5. Enable the dark mode.

newMockFrame({
  dark: true
});

6. Darken the browser buttons if needed.

newMockFrame({
  style: "darken"
});