Video

Ready to use

Description

The AEM Video component is responsible for rendering video media using the Video Model exported as JSON. It renders the corect video soruce based on the video type whether the source is YouTube, Vimeo or DAM. For the DAM video it builds the appropriate Scene7 encodes video paths when it is enabled, ensuring high‑quality and optimized for performance. It dynamically selects the most suitable encode for each device, reducing bandwidth usage on mobile and serving higher-resolution output on larger screens.

Properties

CookiePlaceHolder

Prop	Type	Description	Optional	From AEM Video Model
cookiePlaceHolderButtonLabel	string	The label button that allows users to accept cookies and load the video.	✅	✅
enableCookiePlaceHolder	boolean	Determines whether the cookie overlay should be shown	✅	✅
cookiePlaceHolderTitle	string	The cookie title displayed on the overlay	✅	✅
cookiePlaceHolderDescription	boolean	The description explaining why consent is required before loading the video.	✅	✅

ExternalVideo

Prop	Type	Description	Optional	From AEM Video Model
youtubeId	string	The YouTube video ID used to build the youtube URL.	✅	✅
youtubeAutoplay	boolean	Enables autoplay for YouTube.	✅	✅
vimeoId	string	The Vimeo video ID used to build the vimeo URL.	✅	✅
vimeoAutoplay	boolean	Enables autoplay for Vimeo.	✅	✅
startTime	number	The timestamp where the video should start.	✅	✅
cookieYoutube	CookiePlaceHolder	Cookie placeholder configuration for YouTube.	✅	✅
cookieVimeo	CookiePlaceHolder	Cookie placeholder configuration for Vimeo.	✅	✅

VideoData

Prop	Type	Description	Optional	From AEM Video Model
type	VideoType	Defines the video source type, e.g. DAM Video, Vimeo Video, Youtube Video	❌	✅
overlayTitle	boolean	Indicates whether the video title should be displayed in the overlay.	✅	✅
externalVideo	ExternalVideo	The external video configuration object.	✅	✅
dynamicAssetFallBack	thumbnail	Thumbnail metadata exported from the backend, used on top of the video	✅	✅
dynamicAssetSource	damVideo	The DAM video object containing the primary video source.	✅	✅

Examples

Vimeo Video

import { Asset } from '@tmedxp/aem-react-components';

const VimeoVideo = () => (
  <Video
    video={{
      type: 'Vimeo Video',
      overlayTitle: 'Title',
      externalVideo: {
        youtubeId: null,
        youtubeAutoplay: false,
        vimeoId: '838825000',
        vimeoAutoplay: false,
        cookieVimeo: {
          enableCookiePlaceHolder: false,
          cookiePlaceHolderTitle: 'Click here to accept cookie',
          cookiePlaceHolderDescription: null,
          cookiePlaceHolderButtonLabel: 'Click here to accept cookie',
        },
        cookieYoutube: {
          enableCookiePlaceHolder: false,
          cookiePlaceHolderTitle: null,
          cookiePlaceHolderDescription: null,
          cookiePlaceHolderButtonLabel: null,
        },
        startTime: 0,
      },
      thumbnail: {
        assetState: 'processed',
        type: 'Image',
        path: 'toyotaeuropetest/Hero-Image-2-3',
        domain: 'https://scene7.toyota.eu/',
        folder: 'toyotaeuropetest/qa-foundation/dam-asset-metadata/',
        title: 'Hero-Image-2-3',
        fileStatus: 'PublishComplete',
        status: 'Finished',
        altText: 'Alt',
        altLanguages: [],
        publishTimeStamp: 1_765_969_735_882,
        scene7FileAvs: '',
        fileReference:
          '/content/dam/qa-foundation/dam-asset-metadata/Hero-Image-2.png',
      },
      damVideo: {
        dynamicEncodes: 'None',
        altText: 'alt',
        autoplay: false,
        loop: true,
        trackSrc: '',
        assetMetadata: {
          assetState: null,
          type: null,
          path: null,
          domain: null,
          folder: null,
          title: null,
          fileStatus: null,
          status: null,
          altText: null,
          altLanguages: null,
          publishTimeStamp: null,
          scene7FileAvs: null,
          fileReference: '',
          name: '',
        },
        decorative: false,
      },
    }}
  />
);

export { VimeoVideo };

Dam Video

import { Asset } from '@tmedxp/aem-react-components';

const DamVideo = () => (
  <Video
    video={{
      type: 'DAM Video',
      overlayTitle: 'Title',
      externalVideo: {
        youtubeId: null,
        youtubeAutoplay: false,
        vimeoId: null,
        vimeoAutoplay: false,
        cookieVimeo: {
          enableCookiePlaceHolder: false,
          cookiePlaceHolderTitle: null,
          cookiePlaceHolderDescription: null,
          cookiePlaceHolderButtonLabel: null,
        },
        cookieYoutube: {
          enableCookiePlaceHolder: false,
          cookiePlaceHolderTitle: null,
          cookiePlaceHolderDescription: null,
          cookiePlaceHolderButtonLabel: null,
        },
        startTime: 0,
      },
      thumbnail: {
        assetState: 'processed',
        type: 'Image',
        path: 'toyotaeuropetest/Hero-Image-2-3',
        domain: 'https://scene7.toyota.eu/',
        folder: 'toyotaeuropetest/qa-foundation/dam-asset-metadata/',
        title: 'Hero-Image-2-3',
        fileStatus: 'PublishComplete',
        status: 'Finished',
        altText: 'Alt',
        altLanguages: [],
        publishTimeStamp: 1_765_969_735_882,
        scene7FileAvs: '',
        fileReference:
          '/content/dam/qa-foundation/dam-asset-metadata/Hero-Image-2.png',
      },
      damVideo: {
        dynamicEncodes: 'Encodes',
        altText: 'Alt',
        autoplay: true,
        loop: true,
        trackSrc: '/content/dam/subtitles/sample_sv.vtt',
        assetMetadata: {
          assetState: 'processed',
          type: 'Video',
          path: 'toyotaeuropetest/test-1-1',
          domain: 'https://scene7.toyota.eu/',
          folder: 'toyotaeuropetest/video-test/',
          title: 'test-1-1',
          fileStatus: 'PublishComplete',
          status: 'Finished',
          altText: '',
          altLanguages: [],
          publishTimeStamp: 1_765_969_735_882,
          scene7FileAvs: 'toyotaeuropetest/test-1-1-AVS',
          fileReference: '/content/dam/video-test/test-1.mp4',
        },
        decorative: false,
      },
    }}
  />
);

export { DamVideo };