MediaEmbedViewer (experimental)

Viewer for embedded (streaming) media like YouTube videos.

This component can be used individually or integrated with the MediaSuiteViewer.

Note: The MediaEmbedViewer is still unstable and is only tested with YouTube videos. More providers but also breaking changes will likely come in the future.

link Reference

link MediaEmbedViewer component props

export type MediaEmbedViewerProps = HTMLProps<HTMLDivElement> & {
    /** URL to the media resource to embed. */
    embedUrl: string;

    /** Embedded media metadata. */
    embedMeta: EmbedMetaProps | undefined;

    /** Callback when the embed metadata changes. */
    onEmbedChange: (embedMeta: EmbedMetaProps | undefined) => void;

    /** Sets the aspect-ratio style of the embedded media. */
    aspectRatio?: CSSProperties['aspectRatio'];

    /** Sets the focal point of the embedded media. */
    focalPoint?: FocalPoint;

    /** Sets the object-fit style on the embedded media. */
    objectFit?: CSSProperties['objectFit'];

    /** Height style applied to the embedded media (not the HTML attribute). */
    heightStyle?: CSSProperties['height'];

    /** Width style applied to the embedded media (not the HTML attribute). */
    widthStyle?: CSSProperties['width'];
};

link Embedded media metadata.

export type EmbedMetaProps = {
    allow: string | undefined;
    aspectRatio: CSSProperties['aspectRatio'] | undefined;
    embedType: string | undefined;
    html: string | undefined;
    height: number | undefined;
    width: number | undefined;
    isIframe: boolean;
    isMedia: boolean;
    isWordPress: boolean;
    providerAuthority: string | undefined;
    providerName: string | undefined;
    providerSlug: string | undefined;
    providerUrl: string | undefined;
    source: string | undefined;
    thumbnailHeight: number | undefined;
    thumbnailUrl: string | undefined;
    thumbnailWidth: number | undefined;
    title: string | undefined;
};