---
description: Use various video playlist layouts provided in the Video Playlists section
---

# Video Playlists

Ionic 4 Full app contains 3 video playlist layouts . For demo purpose , the list of videos is given as a JSON object.

```
this.gridImages = [
      { title: 'Elon Musk in Interstellar Parody', image: 'assets/video/elon.jpg', length: '4:49', author: 'Kazifoo', views: '951K', date: '2 months ago', avatar: 'assets/video/av-musk.jpg', likes: 1345, dislikes: 567, subscribers: '13k', source: 'https://www.youtube.com/embed/zewyvQEqsS4?autoplay=1&cc_load_policy=1' },
      { title: 'Marvel Studios\' Avengers: Endgame - Official Trailer', image: 'assets/video/marvel.jpg', length: '6:49', author: 'Marvel', views: '951K', date: '6 months ago', avatar: 'assets/video/av-marvel.jpg', likes: 1345, dislikes: 567, subscribers: '13k', source: 'https://www.youtube.com/embed/LPhqL4DqzBg?autoplay=1' },
      { title: 'The Hidden Meaning in the Shawshank Redemption', image: 'assets/video/shawshank.jpg', length: '12:00', author: 'Movee', views: '951K', date: '1 months ago', avatar: 'assets/video/av-trailer.jpg', likes: 1345, dislikes: 567, subscribers: '13k', source: 'https://www.youtube.com/embed/-2hWKvq35RM' },
      { title: 'JOHN WICK 3 Trailer English Subtitled ', image: 'assets/video/wick.jpg', length: '3:49', author: 'TrailersWD', views: '951K', date: '1 months ago', avatar: 'assets/video/av-wick.jpg', likes: 1345, dislikes: 567, subscribers: '13k', source: 'https://www.youtube.com/embed/rPCzao7H6n8' },
      { title: 'Why Was This Plane Invulnerable: The SR-71 Blackbird Story', image: 'assets/video/blackbird.jpg', length: '5:49', author: 'ArmyHX', views: '951K', date: '12 months ago', avatar: 'assets/video/av-black.jpg', likes: 1345, dislikes: 567, subscribers: '13k', source: 'https://www.youtube.com/embed/th-RoJBP0Vs' },
      { title: 'Elon Musk in Interstellar Parody', image: 'assets/video/elon.jpg', length: '4:49', author: 'Kazifoo', views: '951K', date: '2 months ago', avatar: 'assets/video/av-musk.jpg', likes: 1345, dislikes: 567, subscribers: '13k', source: 'https://www.youtube.com/embed/zewyvQEqsS4' },
      { title: 'Marvel Studios\' Avengers: Endgame - Official Trailer', image: 'assets/video/marvel.jpg', length: '6:49', author: 'Marvel', views: '951K', date: '6 months ago', avatar: 'assets/video/av-marvel.jpg', likes: 1345, dislikes: 567, subscribers: '13k', source: 'https://www.youtube.com/embed/LPhqL4DqzBg' },
      { title: 'The Hidden Meaning in the Shawshank Redemption', image: 'assets/video/shawshank.jpg', length: '12:00', author: 'Movee', views: '951K', date: '1 months ago', avatar: 'assets/video/av-trailer.jpg', likes: 1345, dislikes: 567, subscribers: '13k', source: 'https://www.youtube.com/embed/-2hWKvq35RM' },
      { title: 'JOHN WICK 3 Trailer English Subtitled ', image: 'assets/video/wick.jpg', length: '3:49', author: 'TrailersWD', views: '951K', date: '1 months ago', avatar: 'assets/video/av-wick.jpg', likes: 1345, dislikes: 567, subscribers: '13k', source: 'https://www.youtube.com/embed/rPCzao7H6n8' },
      { title: 'Why Was This Plane Invulnerable: The SR-71 Blackbird Story', image: 'assets/video/blackbird.jpg', length: '5:49', author: 'ArmyHX', views: '951K', date: '12 months ago', avatar: 'assets/video/av-black.jpg', likes: 1345, dislikes: 567, subscribers: '13k', source: 'https://www.youtube.com/embed/th-RoJBP0Vs' }
    ];
```



### Youtube Home Style

This  layout is available at `src/app/video-playlists/grid`

This playlist layout gives you the layout of Youtube Homepage where videos are listed in large grids.

![Youtube Home Layout](https://3065094597-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-La-kqVz2Uq1Ka0VUWZT%2F-LcVeZVK-4Y1mu4FeNzS%2F-LcVmixWDF5cnrOu28DE%2FScreen%20Shot%202019-04-15%20at%204.58.29%20PM.png?alt=media\&token=adeca60b-014b-42ae-963f-d66ac2f2f4b9)

On click, the video plays in a separate modal

![Video in separate modal](https://3065094597-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-La-kqVz2Uq1Ka0VUWZT%2F-LcVeZVK-4Y1mu4FeNzS%2F-LcVmquEIkJzB1k0CSBz%2FScreen%20Shot%202019-04-15%20at%204.58.38%20PM.png?alt=media\&token=36251778-ef02-4dd6-90c2-b6332ab7457e)

### Youtube Player with playlist

This  layout is available at `src/app/video-playlists/playlist`

This layout give the Youtube player layout with a list of videos below it, and with video details right below the video player. The video plays in the video player itself.&#x20;

![](https://3065094597-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-La-kqVz2Uq1Ka0VUWZT%2F-LcVs6iuYAxZjONtSt5G%2F-LcVuHCKzchRWN1g-qbK%2Fyoutube.gif?alt=media\&token=9991d720-e406-4481-8de5-3cc8b96efae4)

### Large video cards

This  layout is available at `src/app/video-playlists/largecard`

This layout is a card list layout, where video play in the card itself. This layout can be used for an app with a feed of small videos like Instagram . The video can be made fullscreen.&#x20;

![Card list for videos](https://3065094597-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-La-kqVz2Uq1Ka0VUWZT%2F-LcVeZVK-4Y1mu4FeNzS%2F-LcVnornPbfXEx4aPPgc%2FScreen%20Shot%202019-04-15%20at%205.03.03%20PM.png?alt=media\&token=1a93a529-1702-4f64-a397-526d801a1df8)

![Videos play in the card itself](https://3065094597-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-La-kqVz2Uq1Ka0VUWZT%2F-LcVeZVK-4Y1mu4FeNzS%2F-LcVnruLkm_5CHHirDlF%2FScreen%20Shot%202019-04-15%20at%205.03.13%20PM.png?alt=media\&token=d34f480e-b990-49e5-98b8-fd79bf1542e7)
