Removing fullscreen button in bottom-right of iframe

Using Streamlit
1

Hi Streamlit community,

Was wondering if there’s a way to remove the ‘fullscreen’ button which appears in the bottom-right whenever an app is embedded via iframe (it does not appear on the source URL)?
unnamed

The previous approaches to hide it (e.g., Embeded Streamlit App Footer?) don’t seem to work anymore following a recent update.

Thank you! :slight_smile:

2

Hi @WKT

Have you tried clicking on the Share button found at the top-right menu then going to the Embed tab to get the embed link. More info here: Embed your app - Streamlit Docs

Also see whether iframing or oembed is the preferred option for your use case.

Hope this helps!

3

Hey @dataprofessor, yes, I’ve tried that; ‘show footer’ was disabled but the ‘Fullscreen’ button still appears. This seems to be due to a recent update as this was not an issue a few months ago.

4

In the ?embed=true mode the footer with “Built with Streamlit :balloon:” and " Fullscreen" mode appears.
In the documentation it’s written that it should be not shown by default. How to hide it?

Show the footer reading “Made with Streamlit.”

/?embed=true&embed_options=show_footer
5

I found a simple fix: Apply an additional layer mask above the iframe.

<!DOCTYPE html>
<html>
<head>
  <style>
    /* Style for the overlay layer */
    .overlay {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 35px; /* Fixed height of 35px */
      background-color: rgba(255, 255, 255, 1); /* white background */
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 2; /* Set the z-index higher than the iframe */
    }

    /* Style for the iframe container */
    .iframe-container {
      position: relative;
      width: 100%;
      height: 100%; /* Adjust the height of the iframe container */
      padding-bottom: 56.25%; /* 16:9 aspect ratio for responsive iframe */
      z-index: 1; /* Set the z-index lower than the overlay */
    }

    /* Style for the iframe itself */
    iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border: none;
    }
  </style>
</head>
<body>
  <!-- Iframe container -->
  <div class="iframe-container">
    <!-- Your iframe code -->
    <iframe
      src="https://30days.streamlit.app/?embed=true"
      height="450"
      style="width:100%;border:none;"
    ></iframe>
  </div>

  <!-- Overlay layer -->
  <div class="overlay">
    <!-- Add your content here, e.g., a message or buttons -->
    <p></p>
  </div>
</body>
</html>
6

Tried some of the solutions above to no luck.

Does anyone have any ideas / workarounds?

7

Haven’t found a solution either; hopefully someone else has had more luck

8

They're different footers. The /?embed=true&embed_options=show_footer is a small, unobstrusive 'Made with Streamlit' comment that appears at the bottom of the page. The only way to get rid of the Balloon-Built with Streamlit-Fullscreen footer that is locked to the bottom of the viewport that I've found is to cover it over. See link below.

9

The overlay needs to be inside the iframe-container.
See this answer

10

This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.