Skip to content

Using iFrames in Documentation

This guide demonstrates how to embed external content in your documentation using iFrames.

Basic iFrame Embedding

You can embed external content using the HTML iframe tag. For example:

<iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" width="560" height="315" frameborder="0" allowfullscreen></iframe>

Which renders as:

Responsive iFrames

To make iframes responsive, you can use our predefined CSS classes:

<div class="iframe-container aspect-16x9">
    <iframe 
        src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3153.0672670787397!2d-122.3999012!3d37.8010613!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x80858098111d4e71%3A0x71eff0ed908e1f83!2sGolden%20Gate%20Bridge!5e0!3m2!1sen!2sus!4v1654000000000!5m2!1sen!2sus"
        allowfullscreen>
    </iframe>
</div>

Which renders as:

Different Aspect Ratios

We've predefined several aspect ratio classes:

16:9 Aspect Ratio (Widescreen)

<div class="iframe-container aspect-16x9">
    <iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" allowfullscreen></iframe>
</div>

4:3 Aspect Ratio (Standard)

<div class="iframe-container aspect-4x3">
    <iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" allowfullscreen></iframe>
</div>

1:1 Aspect Ratio (Square)

<div class="iframe-container aspect-1x1">
    <iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" allowfullscreen></iframe>
</div>

Embedding Game Demos or Prototypes

You can embed game demos from platforms like itch.io:

<div class="iframe-container" style="padding-top: 30%;">
    <iframe src="https://itch.io/embed/1234567"></iframe>
</div>

Security Considerations

When embedding iframes:

  1. Always use HTTPS sources
  2. Consider the sandbox attribute for untrusted content
  3. Be aware of potential tracking/privacy implications

Using Markdown Inside HTML (md_in_html extension)

With the md_in_html extension enabled, you can use Markdown inside HTML blocks:

This is a paragraph with **bold text** and *italic text*. - List item 1 - List item 2

Embedding RFG Studio Content

You can embed content from your own website:

<div class="iframe-container aspect-16x9">
    <iframe src="https://rfgstudios.com/embedded-content"></iframe>
</div>
Created: June 10, 2025 04:12:20
Last update: June 10, 2025 04:12:20
Edit this page