VideoOnIntersection

View on GitHub

import { VideoOnIntersection } from '@sky-uk/ui-core';

The VideoOnIntersection component can be used if you want a video that only starts to play once it has intersected with the viewport.

By default it will continue playing the video until it reaches the end, even when it has exited the viewport.

<VideoOnIntersection src="https://assets.contentstack.io/v3/assets/blt77d122705d37a002/blt335ec01d48fb6d9c/example-video.mp4" $width="100%" />

Props

exitBehavior

You can use the exitBehavior prop to fine tune what should happen once the VideoOnIntersection component exits the viewport.

It accepts following values:

pause (default) - Pauses the video and resumes once it re-intersects with the viewport.
end - Skips to the end of the video and will not resume once it re-interects with the viewport.
restart - Restarts the video and resumes playing once it re-intersects with the viewport.

<VideoOnIntersection src="https://assets.contentstack.io/v3/assets/blt77d122705d37a002/blt335ec01d48fb6d9c/example-video.mp4" exitBehavior="restart"  $width="100%"/>

intersectionOptions

The intersectionOptions prop allows you to configure the underlying IntersectionObserver. See MDN.

<VideoOnIntersection src="https://assets.contentstack.io/v3/assets/blt77d122705d37a002/blt335ec01d48fb6d9c/example-video.mp4" intersectionOptions={{ rootMargin: '0px', threshold: 1.0 }} $width="100%" />