---
title: "Components — VideoOnIntersection"
canonical: https://sky-ui.cf.sky.com/components/video-on-intersection
apiPackages: [{"name":"@sky-uk/ui-core","representedVersion":"13.2.0"}]
---

# Components — VideoOnIntersection

```js
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.

---

```tsx
<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.

```tsx
<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](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API).

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