---
title: 'iFrame'
description: 'Embed any content from the internet. Some websites may restrict access.'
hide_title: true
---

import { AddingWidget } from '@site/src/components/widgets/adding';
import { WidgetConfig } from '@site/src/components/widgets/configuration';
import { WidgetHeader } from '@site/src/components/widgets/header';
import { iframeWidget } from '.';


<WidgetHeader
  widget={iframeWidget}
  categories={['Embed']}
/>

If your application is not supported natively by Homarr, you can integrate it using the iframe widget.
It uses the [iframe element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe),
which embeds the desired page in the browser.
This means, no traffic is routed through Homarr (and the URL must be reachable from the client).

### Screenshots

import wikipediaHomepage from './img/wikipedia.png';
import youtubeStream from './img/nasa-iss-stream.png';

<div>
  <img src={wikipediaHomepage} alt="iframe wikipedia-homepage" width={128 * 3} />
  <img src={youtubeStream} alt="iframe youtube-iss-stream" width={128 * 3} />
</div>

### Adding the widget

<AddingWidget />

### Limitations

Although you can integrate many websites, some may not work.
This is because the administrators of those sites disallow iframes
for security reasons, as users could easily be tricked
by embeding the original site on a malicious page.

Some proxies disallow iframes by default for this reason.
You can use https://iframetest.com to check, if the site is allowing iframes.

If you manage all of your own applications, you can usually change that by configuring
the appropriate headers (such as `X-Frame-Options` or `Content-Security-Policy`) to allow iframes.

For example, to allow your site to be embedded in iframes from specific domains:

**Apache (.htaccess or httpd.conf):**
```apache
Header set Content-Security-Policy "frame-ancestors 'self' https://trusted-domain.com"
Header set X-Frame-Options "ALLOW-FROM https://trusted-domain.com"
```

**Nginx:**
```nginx
add_header Content-Security-Policy "frame-ancestors 'self' https://trusted-domain.com";
add_header X-Frame-Options "ALLOW-FROM https://trusted-domain.com";
```

### Example URLs

- **Wikipedia homepage:** https://en.wikipedia.org/wiki/Main_Page
- **Any YouTube video or stream:** https://www.youtube.com/embed/dQw4w9WgXcQ?si=MWUbbG66UNTla_Ni

### Configuration
<WidgetConfig configuration={iframeWidget.configuration} />

### Transparent iframes

To create a transparent iframe like below you can use the following html code and load it into your iframe:

```html
<html style="color-scheme: dark;">
<body style="background: none; display: flex; justify-content: center; align-items: center;">
    <img src="https://cdn.jsdelivr.net/gh/homarr-labs/dashboard-icons/svg/homarr.svg" width="90" height="90" />
</body>
</html>
```

![transparent iframe](./img/transparent-iframe.png)

### Third party content
:::warning

The content below is an overview of third party projects. All support requests/problems must be redirected to the appropriate repository.
We cannot guarantee the functionality nor security of these tools.

:::

### homarr-iframes from Diogo Valentim
The project [homarr-iframes](https://github.com/diogovalentte/homarr-iframes) has iframes designed to be used with Homarr, these iframes offer a minimalist view of other systems:

- [Vikunja](https://github.com/go-vikunja/vikunja): overview of your tasks with links to them.
- [Linkwarden](https://github.com/linkwarden/linkwarden): overview of your bookmarks with links to them.
- [Cinemark Brazil](https://www.cinemark.com.br): overview of the movies in Cinemark theaters in your city (*only in Brazil*).

![Image of the Vikunja (left), Linkwarden (middle), and Cinemark Brazil (right) iframes on a Homarr dashboard](./img/homarr-iframes-example.webp "Image of the Vikunja (left), Linkwarden (middle), and Cinemark Brazil (right) iframes on a Homarr dashboard")

You can [configure the iframes appearance and behavior](https://github.com/diogovalentte/homarr-iframes?tab=readme-ov-file#adding-to-homarr) using query arguments when adding them to your dashboard, like selecting the iframe theme and limit of items to show, and other options specific to each iframe.