Why wont my Grafana iframe not display on my Wordpress site?

I have a Grafana server running on my Virtual Private Server which is graphing indoor air quality data. I want to share a live version of the graphs on a Wordpress page.

Grafana has the facility to share graphs with an 'embed' option, see image below:

<iframe src="http://localhost:3000/d-solo/ee8atzwmton40a/mamas?orgId=1&from=1735442176105&to=1735485376105&timezone=browser&refresh=5m&panelId=1&__feature.dashboardSceneSolo" width="450" height="200" frameborder="0"></iframe>

In order to share this graph, I have altered the Grafana config file to have allow_embedding = true and disable_sanitize_html = true. This was explained in this video.

I have copied the Grafana embed HTML, replaced the 'localhost' with my website (cairanvanrooyen.com) and pasted into my WordPress site (https://cairanvanrooyen.com/2024/12/28/ieq-monitoring-test-page/):

<iframe src="http://cairanvanrooyen.com:3000/d-solo/ee8atzwmton40a/mamas?orgId=1&from=1735442176105&to=1735485376105&timezone=browser&refresh=5m&panelId=1&__feature.dashboardSceneSolo" width="450" height="200" frameborder="0"></iframe>

This iframe is however, displaying as an empty box...

The live Grafana graph seems to be externally accessible and live: http://cairanvanrooyen.com:3000/d-solo/ee8atzwmton40a/mamas?orgId=1&from=1735442176105&to=1735485376105&timezone=browser&refresh=5m&panelId=1&__feature.dashboardSceneSolo

Why does the Grafana graph not display on my WordPress site? I have noticed that the Grafana is HTTP, not HTTPS, is this the source of the issue?

Your Grafana page does currently not allow displaying it in an iFrame because it is hosted with http, not https. You can see this by opening the Dev Tools on your Wordpress site.

So you are right, you can fix this by hosting the Grafana page over https.