Responsive Embed

Embed that scales with its container.

html

<div class="re" style="max-width:360px;">
  <div class="re__frame re__frame--rounded" style="aspect-ratio:16 / 9;" role="img" aria-label="Embedded segment">
    <!-- Real usage: <iframe src="https://example.com/embed/xyz" title="Embedded segment" loading="lazy" allowfullscreen></iframe> -->
    <svg viewBox="0 0 48 48" width="40" height="40" fill="none" stroke="#FAF7F2" stroke-width="1.6" aria-hidden="true"><rect x="6" y="10" width="36" height="28" rx="3"/><path d="M19 19l12 5-12 5z" fill="#FAF7F2" stroke="none"/></svg>
  </div>
  <p class="re__title">Embedded segment</p>
</div>
<style>
.re { width: 100%; font: 13px/1.4 system-ui, sans-serif; color: #241430; }
.re__frame { display: flex; align-items: center; justify-content: center; width: 100%; background: linear-gradient(135deg, #241430, #4a2f5c); border-radius: 4px; }
.re__frame--rounded { border-radius: 14px; }
.re__title { margin: 8px 0 0; font-weight: 600; }
</style>

tailwind

<div class="re-tw w-full font-sans text-[13px] text-[#241430]" style="max-width:360px;">
  <div class="re-tw__frame re-tw__frame--rounded flex items-center justify-center w-full rounded" style="aspect-ratio:16 / 9;background:linear-gradient(135deg,#241430,#4a2f5c);" role="img" aria-label="Embedded segment">
    <!-- Real usage: <iframe src="https://example.com/embed/xyz" title="Embedded segment" loading="lazy" allowfullscreen></iframe> -->
    <svg viewBox="0 0 48 48" width="40" height="40" fill="none" stroke="#FAF7F2" stroke-width="1.6" aria-hidden="true"><rect x="6" y="10" width="36" height="28" rx="3"/><path d="M19 19l12 5-12 5z" fill="#FAF7F2" stroke="none"/></svg>
  </div>
  <p class="mt-2 mb-0 font-semibold">Embedded segment</p>
</div>
<style>
.re-tw__frame--rounded { border-radius: 14px !important; }
</style>

react

export function ResponsiveEmbed({
  ratio = "16 / 9",
  maxWidth = 360,
  title = "Embedded segment",
  rounded = true,
}) {
  return (
    <div style={{ width: "100%", maxWidth, font: "13px/1.4 system-ui, sans-serif", color: "#241430" }}>
      <div
        role="img"
        aria-label={title}
        style={{ display: "flex", alignItems: "center", justifyContent: "center", width: "100%",
          aspectRatio: ratio, background: "linear-gradient(135deg,#241430,#4a2f5c)", borderRadius: rounded ? 14 : 4 }}
      >
        {/* Real usage: <iframe src="https://example.com/embed/xyz" title={title} loading="lazy" allowFullScreen /> */}
        <svg viewBox="0 0 48 48" width="40" height="40" fill="none" stroke="#FAF7F2" strokeWidth="1.6" aria-hidden="true">
          <rect x="6" y="10" width="36" height="28" rx="3" />
          <path d="M19 19l12 5-12 5z" fill="#FAF7F2" stroke="none" />
        </svg>
      </div>
      <p style={{ margin: "8px 0 0", fontWeight: 600 }}>{title}</p>
    </div>
  );
}