Iframe Component is Blank on Streamlit Cloud Deploy

[Nathan_Jones1]

I am having trouble getting an iframe to display correctly on my private Streamlit Cloud deployed app.

I am trying to embed a Metabase dashboard inside my Streamlit app. Locally, the iframe works just fine (pictured).

The example iframe from the Streamlit docs is loading in my Streamlit Cloud deployed app, but not my Metabase iframe.

Here is the code used to display my iframe (I made replicated this scenario with dummy data so you can test the code) and my Streamlit version

streamlit==1.10.0

import streamlit.components.v1 as components
import streamlit as st
st.write("Streamlit Docs Example iframe")
components.iframe("https://docs.streamlit.io/en/latest")
st.write("different iframe test")
components.iframe(src="http://smb-analytics-metabase.herokuapp.com/public/dashboard/afefddda-d5d4-43ed-83fd-307eab7ded3c", width=1285, height=1000, scrolling=True)

I have tried:

• Chrome and Brave browsers
• Using components.html() inplace of components.iframe()
• Removing the width=1285, height=1000, scrolling=True arguements of components.iframe()
• Rebooting my Streamlit Cloud App
• Deleting and Rebuilding my Streamlit Cloud App

None of these things got the iframe to load on the deployed app. Anyone know of a fix ?

Locally

Streamlit Cloud

[randyzwitch]

Answered via Discord, but for readers here:

When having issues on Streamlit Cloud, it is good to check the console. In this case, the issue is having a URL starting with http instead of https, leading to the following error in the browser console:

Mixed Content: The page at https://randyzwitch-metabase-streamlit-app-0yyn12.streamlitapp.com/ was loaded over HTTPS, but requested an insecure frame http://smb-analytics-metabase.herokuapp.com/public/dashboard/afefddda-d5d4-43ed-83fd-307eab7ded3c. This request has been blocked; the content must be served over HTTPS.

Because Streamlit Cloud is https by default, all embedded content must also be the same. This is in contrast to developing on localhost, which is http (unless you are savvy enough to set up SSL on your local computer, and if so, you probably already understand the issues )

Best,
Randy

[Nathan_Jones]

@randyzwitch

Mixed Content

Thank you so much @randyzwitch !

I had tried checking the logs under “Manage App”, but didn’t see that error message. Did I just miss it ?

[randyzwitch]

It’s in the browser developer tools…usually when you right-click, it gives you the option like “Inspect this element”, which will then show you all sorts of stuff about the current page. For example, here’s the Chrome version:

Open Chrome DevTools - Chrome Developers

Best,
Randy

[Nathan_Jones]

Ah, I should have checked that.

Thanks a million !

[ragelysium]

Hi, We’re developing an app on streamlit platform and recently we came across couple of challenges where we cannot make the IFrame component responsive
We tried using page config properties but still there’s lot of white spacing on the top & bottom of the iframe.

st.set_page_config(page_title=None, page_icon=None, layout=“wide”, initial_sidebar_state=“auto”, menu_items=None)

st.markdown(“”"
#MainMenu {visibility: hidden;}
footer {visibility: hidden;}
“”", unsafe_allow_html=True)
placeholder = st.empty()
st.components.v1.iframe(“https://www.google.com/”, width = 1500, height = 800, scrolling = True)

[Tyler]

hey @ragelysium, is your problem responsiveness or the white spacing on the top and bottom? With your example, you can edit the padding at the top by doing something like:

st.set_page_config(page_title=None, page_icon=None, layout="wide", initial_sidebar_state="auto", menu_items=None)

st.markdown(""" <style> #MainMenu {visibility: hidden;} footer {visibility: hidden;} </style> """, unsafe_allow_html=True)
st.markdown(
    "<style>div.block-container{padding-top:1rem;}</style>", unsafe_allow_html=True
)
placeholder = st.empty()
st.components.v1.iframe("https://www.elysiumanalytics.ai/", width = 1500, height = 800, scrolling = True)

This post can also probably help out if you’re looking for something exacty at the top of the screen.

[ragelysium]

Hello Tyler, The problem we have is with the white spacing on the left, right, top, bottom and we tried giving padding in the markdowns but we still see lot’s of white spacing around the iframe.

st.markdown(""" <style>
#MainMenu {visibility: hidden;}
footer {visibility: hidden;}

</style> """, unsafe_allow_html=True)

st.markdown(
"<style>div.block-container{padding-top:6rem; padding-left:1rem; padding-right:1rem;}</style>", unsafe_allow_html=True
)

placeholder = st.empty()
st.components.v1.iframe("https://www.google.com", width = 1500, height = 800, scrolling = True)

[Tyler]

so do you all want 0 spacing on the top, left, and right sides? Or how much spacing do you want?

[ragelysium]

Well we want the iframe to take up the entire screen without any white spaces.

[Tyler]

not totally sure how to do that, out of curiosity, why would you want to use Streamlit if you just want to put another website on it, and not use anything related to Streamlit? What is the problem you’re trying to solve?

[ragelysium]

Well the main goal is to build an native app on streamlit, but for time being we want to showcase couple of features of what our product is doing, so that all snowflake customers can able to access it.