---
title: "Core — useVideoIntersection"
canonical: https://sky-ui.cf.sky.com/core/hooks/use-video-intersection
apiPackages: [{"name":"@sky-uk/ui-core","representedVersion":"13.2.0"}]
---

# Core — useVideoIntersection

```js
import { useVideoIntersection } from '@sky-uk/ui-core';
```

---

A hook that can be used to play `video` elements only when they they have intersected with the viewport.

The easiest way to consume this functionality is via the [VideoOnIntersection](/animation/components/video-on-intersection) component.

This hooks is made availble for cases where a custom trigger is needed.

---

```tsx
function Example() {
    const ref = React.useRef();

    useVideoIntersection({ ref, exitBehavior: 'restart'});

    return (
        <Video ref={ref} src="https://assets.contentstack.io/v3/assets/blt77d122705d37a002/blt335ec01d48fb6d9c/example-video.mp4" autoPlay playsInline muted $width="100%" />
    );
}
```

---

## Arguments

### ref

The `ref` for the video element

---

### triggerRef (Optional)

The `ref` for the triggering element, if different from the video element

---

### exitBehavior

You can use the `exitBehavior` argument to fine tune what should happen once the ref element 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.

---

### 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).