EmbeddingResponsive sizing
Responsive sizing
Make the Moviie Player scale with your layout while keeping the right aspect ratio.
iframes do not inherit their content's intrinsic aspect ratio — you have to enforce it from the host page. The patterns below cover the common cases.
CSS aspect-ratio (recommended)
Modern browsers support the aspect-ratio property natively.
<div style="position: relative; width: 100%; aspect-ratio: 16 / 9">
<iframe
src="https://watch.moviie.ai/embed/VIDEO_ID"
title="Moviie Player"
allow="autoplay; fullscreen; picture-in-picture"
allowfullscreen
style="position: absolute; inset: 0; width: 100%; height: 100%; border: 0"
></iframe>
</div>The wrapper takes the full width of its parent and keeps a 16:9 ratio. The iframe is absolutely positioned so it fills the wrapper without introducing a second scrollbar.
Padding-bottom fallback
For older browsers without aspect-ratio support, use the padding-bottom
hack.
<div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden">
<iframe
src="https://watch.moviie.ai/embed/VIDEO_ID"
title="Moviie Player"
allow="autoplay; fullscreen; picture-in-picture"
allowfullscreen
style="position: absolute; inset: 0; width: 100%; height: 100%; border: 0"
></iframe>
</div>56.25% is 9 / 16 * 100%. Replace it for other ratios:
| Ratio | padding-bottom |
|---|---|
| 16:9 | 56.25% |
| 4:3 | 75% |
| 1:1 | 100% |
| 9:16 (vertical) | 177.78% |
Tailwind CSS
<div class="relative w-full aspect-video overflow-hidden rounded-lg">
<iframe
src="https://watch.moviie.ai/embed/VIDEO_ID"
title="Moviie Player"
allow="autoplay; fullscreen; picture-in-picture"
allowfullscreen
class="absolute inset-0 h-full w-full border-0"
></iframe>
</div>aspect-video resolves to aspect-ratio: 16 / 9.
React
export function MoviiePlayer({ videoId }: { videoId: string }) {
return (
<div className="relative w-full aspect-video overflow-hidden rounded-lg">
<iframe
src={`https://watch.moviie.ai/embed/${videoId}`}
title="Moviie Player"
allow="autoplay; fullscreen; picture-in-picture"
allowFullScreen
className="absolute inset-0 h-full w-full border-0"
/>
</div>
)
}Vertical embeds
Vertical (9:16) videos work identically — change the aspect ratio.
<div style="position: relative; width: 320px; aspect-ratio: 9 / 16">
<iframe
src="https://watch.moviie.ai/embed/VIDEO_ID"
title="Moviie Player"
allow="autoplay; fullscreen; picture-in-picture"
allowfullscreen
style="position: absolute; inset: 0; width: 100%; height: 100%; border: 0"
></iframe>
</div>