Skip to content

Add a section about embedding Streamlit Spaces with auto-resizing iframes #691

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
merged 2 commits into from
Apr 4, 2023
Merged

Add a section about embedding Streamlit Spaces with auto-resizing iframes #691

merged 2 commits into from
Apr 4, 2023

Conversation

whitphx
Copy link
Member

@whitphx whitphx commented Feb 22, 2023 •
edited
Loading

I put a demo GIF of auto-resizing iframe embedding here for future use:
hf-streamlit-iframe-auto-resize

I recorded the video with the following example.

<!DOCTYPE html>
<html class="no-js" lang="">
  <head>
    <meta charset="utf-8" />
    <title>Iframe Resizer Example</title>
  </head>

  <body>
    <div>
      Lorem<br />ipsum<br />dolor<br />sit<br />amet<br />consectetur,<br />adipisicing<br />elit.<br />Praesentium,<br />id<br />ducimus<br />vel,<br />hic<br />sint<br />laboriosam,<br />voluptatum<br />possimus<br />dicta<br />harum<br />excepturi<br />ratione<br />sed<br />sunt<br />aliquid<br />fuga.<br />Eligendi<br />aut<br />libero<br />blanditiis<br />ipsa?
    </div>

    <iframe
      id="streamlit-auto-resize-iframe"
      src="https://whitphx-iframe-resizer-test.hf.space?embed=true#lighttheme"
      frameborder="0"
      width="850"
      height="450"
    ></iframe>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/js/iframeResizer.min.js"></script>
    <script>
      iFrameResize(null, "#streamlit-auto-resize-iframe")
    </script>

    <div>
      Lorem<br />ipsum<br />dolor<br />sit<br />amet<br />consectetur,<br />adipisicing<br />elit.<br />Praesentium,<br />id<br />ducimus<br />vel,<br />hic<br />sint<br />laboriosam,<br />voluptatum<br />possimus<br />dicta<br />harum<br />excepturi<br />ratione<br />sed<br />sunt<br />aliquid<br />fuga.<br />Eligendi<br />aut<br />libero<br />blanditiis<br />ipsa?
    </div>
  </body>
</html>

@whitphx whitphx force-pushed the streamlit-auto-resize-embed branch from 8a8cf0b to a237544 Compare February 22, 2023 15:11
@HuggingFaceDocBuilderDev
Copy link

HuggingFaceDocBuilderDev commented Feb 22, 2023 •
edited
Loading

The documentation is not available anymore as the PR was closed or merged.

@whitphx whitphx marked this pull request as ready for review February 24, 2023 09:58
@whitphx whitphx requested a review from osanseviero February 24, 2023 09:58
christophe-rannou
christophe-rannou approved these changes Apr 4, 2023
View reviewed changes
@whitphx whitphx merged commit 8997a37 into main Apr 4, 2023
@whitphx whitphx deleted the streamlit-auto-resize-embed branch April 4, 2023 08:07
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@christophe-rannou christophe-rannou christophe-rannou approved these changes

@osanseviero osanseviero Awaiting requested review from osanseviero

@cbensimon cbensimon Awaiting requested review from cbensimon

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@whitphx @HuggingFaceDocBuilderDev @christophe-rannou