> For the complete documentation index, see [llms.txt](https://enappd.gitbook.io/capacitor-full-app-ionic-angular/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://enappd.gitbook.io/capacitor-full-app-ionic-angular/features/startup-features/video-playlist-grid-and-list-layouts.md).

# Video Playlist

## Video Playlists

Capacitor 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/pages/video-playlists/grid`

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

![](https://3608702775-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LsQWILyBp_9nWmIJ7TG%2F-Lub9J3FSUTGHBK85js9%2F-LubC0uTiGRzionzc0DM%2Fassets_-La-kqVz2Uq1Ka0VUWZT_-LcVeZVK-4Y1mu4FeNzS_-LcVmixWDF5cnrOu28DE_Screen%20Shot%202019-04-15%20at%204.58.29%20PM.png?alt=media\&token=7af14892-e68c-40c8-8cb3-1987cc190c9b)

On click, the video plays in a separate modal

![](https://3608702775-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LsQWILyBp_9nWmIJ7TG%2F-Lub9J3FSUTGHBK85js9%2F-LubC0uYsktnsP-23m5F%2Fassets_-La-kqVz2Uq1Ka0VUWZT_-LcVeZVK-4Y1mu4FeNzS_-LcVmquEIkJzB1k0CSBz_Screen%20Shot%202019-04-15%20at%204.58.38%20PM.png?alt=media\&token=3333083f-e4a1-4506-94c0-0144c463d0ae)

### Youtube Player with playlist

This  layout is available at `src/app/pages/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. 

![](https://3608702775-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LsQWILyBp_9nWmIJ7TG%2F-Lub9J3FSUTGHBK85js9%2F-LubC0ub8UoCB-hZiPRm%2Fassets_-La-kqVz2Uq1Ka0VUWZT_-LcVs6iuYAxZjONtSt5G_-LcVuHCKzchRWN1g-qbK_youtube.gif?alt=media\&token=c1a2fa69-3899-4df1-bc64-dbefc816268d)

### Large video cards

This  layout is available at `src/app/pages/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.

![](https://3608702775-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LsQWILyBp_9nWmIJ7TG%2F-Lub9J3FSUTGHBK85js9%2F-LubC0u_a2Biz9RvnIGP%2Fassets_-La-kqVz2Uq1Ka0VUWZT_-LcVeZVK-4Y1mu4FeNzS_-LcVnornPbfXEx4aPPgc_Screen%20Shot%202019-04-15%20at%205.03.03%20PM.png?alt=media\&token=ae6beb52-8541-4085-ae9b-f3c0d710db84)

![](https://3608702775-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LsQWILyBp_9nWmIJ7TG%2F-Lub9J3FSUTGHBK85js9%2F-LubC0uaLopmW6GgOStj%2Fassets_-La-kqVz2Uq1Ka0VUWZT_-LcVeZVK-4Y1mu4FeNzS_-LcVnruLkm_5CHHirDlF_Screen%20Shot%202019-04-15%20at%205.03.13%20PM.png?alt=media\&token=87b28d97-6165-43e9-8444-f95ca0c72269)