# Components - EventPage Video Player

**URL:** https://publichappinessmovement.com/t/topic/1211
**Category:** Front End - Documentation
**Created:** [17 April 2019 10:53 UTC](https://publichappinessmovement.com/t/topic/1211 "2019-04-17T10:53:21Z")
**Posts on this page:** 1
**Page:** 1

<div class="post-metadata">

### Author: ![ArtyS](https://publichappinessmovement.com/user_avatar/publichappinessmovement.com/artys/32/288_2.png) [@ArtyS](https://publichappinessmovement.com/u/ArtyS)
#### Post date: [17 April 2019 10:53 UTC](https://publichappinessmovement.com/t/topic/1211/1 "2019-04-17T10:53:22Z")

</div>

Individual event pages currently display a video player in their banner that plays videos (YouTube + a handful of other video streaming sites). Code-wise this is encapsulated as a standalone React component found in the following folder:

`/imports/client/ui/components/VideoPlayer`

Although there is also extensive JSDOC commentary in the relevant files, below is a summary of the logic/process flow of the video player.

**MAIN FEATURES & INGREDIENTS:**

- Actual video playing is driven by **external react-player** ([see here for documentation](https://www.npmjs.com/package/react-player))

- When submitting events user can add up to 3 videos that will be shuffled and played by the player. These are passed as a prop in React.

- User can also click on a button to subscribe to the site’s Youtube channel (logic found under Subscribe.js file)

- **Events without a video** will play from the [Public Happiness Movement Youtube channel](https://www.youtube.com/channel/UCkYVBetdxHE5juw7SPMvOGg), shuffling-playing a subset of videos linked to the event category(ies) which are themselves passed as a prop in React:

**NOTE: Video playlist is an array of the actual Youtube video ID’s** - this is required to be able to randomise the selection (linking directly to the Youtube channel or playlist will mean the same videos are always played in the same order). **This means any new Youtube videos need to be manually added to i18n** to the desired playlist array found in `imports/both/i18n/en/video.json`.