AlgoliaMedia
Introduction
Allow browsers to determine video or slideshow dimensions based on the width of their containing block by creating an intrinsic ratio that will properly scale on any device.
You don't need to include frameborder="0" in your iframes. The aspect ratio is controlled via the aspectRatio prop.
Examples
Element Type
HTML5 Video Player by using <embed> tag:
Showing an image by using <img> tag:
Aspect Ratio
Embed Google Maps and videos from Youtube, Vimeo by using <iframe> tag:
Square (1:1)
Classic (4:3)
Wide (16:9)
Cinema (21:9)
Design Reference
N/A
API
Media
Media
import { Media } from '@ahaui/react'Copy import code for the Media component| Name | Type | Default | Description |
|---|---|---|---|
| aspectRatio | 'square' | 'classic' | 'wide' | 'cinema' | 'wide' | Set the aspect ration of the embed |
| as | elementType | <embed> | You can use a custom element type for this component. |
| width | number | string | ||
| height | number | string |