---
title: "How to show a live website in a mockup using iframes in WordPress?"
url: https://nexterwp.com/docs/how-to-show-a-live-website-in-a-mockup-using-iframes-in-wordpress/
date: 2023-02-22
modified: 2026-04-15
author: "Aditya Sharma"
description: "An iframe, is a HTML element that allows you to embed content from an external source on a webpage. This is commonly used to embed videos, maps, and other external..."
image: https://nexterwp.com/wp-content/uploads/2023/02/show-a-live-website-in-a-mockup-using-iframes-in-wordpress-1024x519.png
word_count: 184
---

# How to show a live website in a mockup using iframes in WordPress?

## Key Takeaways

- Dynamic Device block from Nexter Blocks allows embedding iframes to show live website content.
- Users must install and activate Nexter Blocks to utilize the Dynamic Device block features.
- To add an iframe, set the Layout to Normal and select IFrame from the Content Type section.

An iframe, is a HTML element that allows you to embed content from an external source on a webpage. This is commonly used to embed videos, maps, and other external content.

The Dynamic Device block from the Nexter Blocks allows you to embed iframes in your device mockup to show third party or live website content.

*To check the complete feature overview documentation of the Nexter Blocks* Dynamic Device block, [click here](/docs/dynamic-device-block-settings-overview/).

***Requirement  - This block is a part of the Nexter Blocks*, make sure its installed & activated to enjoy all its powers.**

[LIVE BLOCK LINK](https://nexterwp.com/nexter-blocks/blocks/wordpress-device-mockups/)

TTo add an iframe inside your device mockup add the block on the page, make sure to set the **Layout** to **Normal** and after choosing the appropriate device type and mockup, go to **Content Type **and select **IFrame **from the section.

Then add the website URL in the **IFrame URL** field.

Then add the Title for Iframe in the **IFrame Title** field.

![](https://nexterwp.com/wp-content/uploads/2023/02/dynamic-device-select-iframe-new.png)

Now you’ll able to interact with the site or content from your device mockup.

Also, check [How to add website scrolling device mockup in WordPress](https://nexterwp.com/docs/website-scrolling-device-mockup-in-wordpress/).

## Frequently Asked Questions

**Q: What should I do if my iframe is not displaying the live website?**
A: If your iframe isn't showing the live website, double-check the URL you entered in the IFrame URL field. Ensure it is correct and accessible. Some websites may have restrictions that prevent them from being displayed in iframes due to security settings, which can cause them to not load properly.

**Q: Can I use the Dynamic Device block to show content from any website?**
A: The Dynamic Device block allows you to embed iframes, which means you can show content from third-party websites. However, keep in mind that some sites may block iframe embedding due to security policies, which could prevent them from displaying correctly.

**Q: What is the best layout setting for embedding a live website in a mockup?**
A: For embedding a live website in a mockup using the Dynamic Device block, set the Layout to Normal. This ensures that the iframe displays correctly within the selected device mockup, allowing for a more accurate representation of the live site.

**Q: What happens if I forget to set the Content Type to IFrame?**
A: If you forget to set the Content Type to IFrame, the block will not display the live website as intended. Instead, it may show a blank space or the default content of the block. Always ensure you select IFrame to embed external content properly.

**Q: Is there a way to add scrolling to the iframe content?**
A: The iframe itself does not inherently support scrolling. However, if the content within the iframe is larger than the display area, users can scroll through it. Ensure that the content you are embedding is designed to be scrollable if needed.