iFrame
Embedded content frames for external resources and media.
Basic iFrame
HTML
<iframe
src="about:blank"
title="Basic iframe example"
width="100%"
height="200"
style="
border: 1px solid var(--color_line_secondary);
border-radius: 8px;
background: var(--color_fill_secondary);
"
></iframe>Responsive iFrame (16:9)
This iframe maintains a 16:9 aspect ratio regardless of container width.
HTML
<div
class="ss-c-iframe-container"
style="
position: relative;
width: 100%;
padding-bottom: 56.25%;
overflow: hidden;
border-radius: 12px;
"
>
<iframe
src="about:blank"
title="Responsive 16:9 iframe"
style="
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
background: linear-gradient(
135deg,
#667eea 0%,
#764ba2 100%
);
"
allowfullscreen
></iframe>
</div>
<p style="margin-top: 12px; font-size: 13px; opacity: 0.7">
This iframe maintains a 16:9 aspect ratio regardless of container
width.
</p>iFrame with Loading State
Loading content...
HTML
<div style="position: relative; width: 100%; max-width: 600px">
<div
style="
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
z-index: 0;
"
>
<div
style="
width: 32px;
height: 32px;
border: 3px solid var(--color_fill_secondary);
border-top-color: var(--color_fill_primary);
border-radius: 50%;
animation: spin 1s linear infinite;
"
></div>
<span style="font-size: 14px; opacity: 0.7">
Loading content...
</span>
</div>
<iframe
src="about:blank"
title="iframe with loading state"
width="100%"
height="300"
style="
position: relative;
z-index: 1;
border: 1px solid var(--color_line_secondary);
border-radius: 8px;
background: var(--color_fill_secondary);
"
></iframe>
</div>
<style>
@keyframes spin {
to {
transform: translate(-50%, -50%) rotate(360deg);
}
}
</style>Video Embed Placeholder
HTML
<div
class="ss-c-video-embed"
style="
position: relative;
width: 100%;
max-width: 640px;
padding-bottom: 56.25%;
background: #000;
border-radius: 12px;
overflow: hidden;
"
>
<div
style="
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
color: white;
"
>
<div
style="
width: 80px;
height: 80px;
background: rgba(255, 0, 0, 0.9);
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 16px;
cursor: pointer;
"
>
<span style="font-size: 32px; margin-left: 4px">▶</span>
</div>
<p style="margin: 0; font-size: 14px; opacity: 0.9">
Click to play video
</p>
</div>
<!-- Replace with actual YouTube/Vimeo embed -->
<iframe
style="
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
opacity: 0;
"
title="Video embed placeholder"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
></iframe>
</div>Map Embed Placeholder
HTML
<div
class="ss-c-map-embed"
style="
position: relative;
width: 100%;
max-width: 600px;
height: 300px;
background: linear-gradient(180deg, #e8f4ea 0%, #c8e6c9 100%);
border-radius: 12px;
overflow: hidden;
border: 1px solid var(--color_line_secondary);
"
>
<div
style="
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
"
>
<div style="font-size: 48px; margin-bottom: 8px">⌖</div>
<p style="margin: 0; font-size: 14px; opacity: 0.8">
Interactive map placeholder
</p>
<p style="margin: 8px 0 0; font-size: 12px; opacity: 0.6">
Replace with Google Maps or Mapbox embed
</p>
</div>
<!-- Replace src with actual map embed URL -->
<iframe
src="about:blank"
title="Map embed placeholder"
style="
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
opacity: 0;
"
loading="lazy"
allowfullscreen
></iframe>
</div>Secure iFrame with Sandbox
Security attributes:
-
sandbox- Restricts iframe capabilities -
loading="lazy"- Deferred loading for performance -
referrerpolicy- Controls referrer information
HTML
<iframe
src="about:blank"
title="Sandboxed iframe"
width="100%"
height="200"
sandbox="allow-scripts allow-same-origin"
loading="lazy"
referrerpolicy="no-referrer"
style="
border: 2px dashed var(--color_line_secondary);
border-radius: 8px;
background: var(--color_fill_secondary);
"
></iframe>
<div
style="
margin-top: 12px;
padding: 12px;
background: var(--color_fill_secondary);
border-radius: 8px;
font-size: 13px;
"
>
<strong>Security attributes:</strong>
<ul style="margin: 8px 0 0; padding-left: 20px; opacity: 0.8">
<li>
<code>sandbox</code>
- Restricts iframe capabilities
</li>
<li>
<code>loading="lazy"</code>
- Deferred loading for performance
</li>
<li>
<code>referrerpolicy</code>
- Controls referrer information
</li>
</ul>
</div>