Key Features:

Aspect Ratios Supported:

• HD Video (16:9) - aspect-ratio="hd-video"
• Standard Monitor (4:3) - aspect-ratio="standard-monitor"
• Classic Film (3:2) - aspect-ratio="classic-film"
• Cinemascope (21:9) - aspect-ratio="cinemascope"

Overlay Support:

• Relative wrapper container for positioning overlays
• Dedicated #overlay slot with z-index management
• Support for dialogs, drawers, slide-overs, and custom overlays

Additional Features:

• Loading state with spinner
• Accessibility features (focus management, ARIA attributes)
• Dark mode support
• Security attributes (sandbox, referrerpolicy)
• Exposed reload() method for programmatic control
• Customizable CSS classes for iframe and overlay

Usage:

<template>
  <ResponsiveIframe
    src="https://example.com"
    aspect-ratio="hd-video"
    title="My Content"
    :show-loading="isLoading"
  >
    <template #overlay>
      <!-- Your overlay content here -->
      <MyDialog v-if="showDialog" @close="showDialog = false" />
    </template>
  </ResponsiveIframe>
</template>

The component uses Tailwind CSS v4 utilities and is fully responsive. The relative wrapper ensures your overlays will position correctly above the iframe content, making it perfect for component dialogs, drawers, and slide-overs as requested.