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
import streamlit.components.v1 as components
import streamlit as st
st.write("Streamlit Docs Example iframe")
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 ?
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 )
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:
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.
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?
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.