# Related content
Show related videos inside the player and load them in place when the viewer picks one.
## Open Video UI
Tip: open your browser's developer console and use the `player` and `THEOplayer` variables to interact with this demo.
Open Video UI has no built-in related-content overlay, so this example fills a `theoplayer-menu` with a grid of tiles. Each tile loads its source directly in the player, and the menu opens automatically when the video ends.
```js
tile.addEventListener('click', () => {
relatedMenu.closeMenu();
player.autoplay = true;
player.source = {
sources: { src: item.source, type: 'application/x-mpegurl' },
poster: item.image,
metadata: { title: item.title },
};
});
player.addEventListener('ended', () => {
if (relatedMenu.hasAttribute('hidden')) {
relatedButton.click();
}
});
```
Code
demo.html
```html
Related contentRelated content
```
## Default UI
The [Default UI](https://optiview.dolby.com/docs/theoplayer/ui/web/default-ui.md) has a built-in related-content overlay driven by `player.related.sources`. Each item carries a `source` description, so clicking a tile loads it in the same player.
```js
player.related.sources = [
{
image: 'https://cdn.theoplayer.com/video/tears_of_steel/poster.jpg',
title: 'Tears of Steel',
duration: '12:14',
source: {
sources: [{ src: 'https://cdn.theoplayer.com/video/tears_of_steel/index.m3u8', type: 'application/x-mpegurl' }],
},
},
];
player.addEventListener('ended', () => {
if (!player.related.showing) {
player.related.show();
}
});
```
Code
default-ui.html
```html
Related content (Default UI)
```