Ionic 5 Full Starter App
  • Enappd Apps
  • Ionic 5 Full App
    • What is Ionic 5 Full App?
    • Template Features
    • Initial Setup
      • Environment Configuration
      • Credentials
    • Running the app
    • Deploying app as PWA
    • Building App on device
    • How to use this template?
      • Copy a module to another app
      • Shared Component & Modules
      • Map Service
    • Beginner Pack Features
      • Firebase
      • Layouts
      • Sidemenus
      • Login and Signups
      • Chat screens
      • Chat Lists
      • Video Playlists
      • Grids and Lists Layouts
    • Startup Pack Features
      • Wordpress
        • Wordpress JSON API Basics
        • Wordpress in Ionic 5 Full App
      • Translation - Multi-language
      • Using Custom Fonts
      • Infinite scroll
      • Content Loaders
      • Pull to refresh
      • List re-ordering
      • Date Pickers
    • Pro Pack Features
      • Phaser Game Framework
      • AdMob Integration
        • AdMob Introduction
        • Setting up Google Admob
        • Integration
      • Social Sharing
      • QR and Barcode Scanning
      • Google Places
      • Google Autocomplete
      • Social Logins
        • Google Login
        • Facebook Login
        • Twitter Login
      • Woo-commerce Integration
    • Removing a Page / Component
    • Removing a plugin
    • FAQs
    • Changelog
    • Troubleshoot
Powered by GitBook
On this page
  • Youtube Home Style
  • Youtube Player with playlist
  • Large video cards

Was this helpful?

  1. Ionic 5 Full App
  2. Beginner Pack Features

Video Playlists

Use various video playlist layouts provided in the Video Playlists section

PreviousChat ListsNextGrids and Lists Layouts

Last updated 6 years ago

Was this helpful?

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.

On click, the video plays in a separate modal

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.

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.

Youtube Home Layout
Video in separate modal
Card list for videos
Videos play in the card itself