iOS App for Youtube - Youtube App for iOS Youtube app for iOS is a video browsing app in which you...

download iOS App for Youtube - Youtube App for iOS Youtube app for iOS is a video browsing app in which you can

of 6

  • date post

  • Category


  • view

  • download


Embed Size (px)

Transcript of iOS App for Youtube - Youtube App for iOS Youtube app for iOS is a video browsing app in which you...

  • Youtube App for iOS Youtube app for iOS is a video browsing app in which you can add your favourite youtube channels and view their videos and playlists and get a personalised video watching experience. You can also rebrand and configure it to create a youtube app for your channel.

    Features - Browse and watch videos of Youtube channel. - Browse playlists of Youtube channels. - Play videos in native player. - Add or Delete youtube channels from code. - Share video with friends via mail, social platforms etc. - Admob support. - iOS 7 and 8 compatible. - Supports iPhone 6, 6 plus and iPad. - Internationalisation Options. Modify any text easily. - Basic theming. Change colour of icons and background.

    APP SUBMISSION TIPS Your icon, launch image or app name must not contain word Youtube or logo of Youtube or anything which tries to mimic Youtube. It increases your chances of app rejection.

    Upcoming features - Data caching using Core Data - Bookmarking a video - Smart Native Player - Plays next video in the current playlist. - Optimise UI for iPad - Use split view controller - Channel can be added from app - iOS notifications if a new video is added in subscribed channels - Google Login - Adaptive Hamburger - Hamburger disappears if there is only one channel - Different viewing styles - list and thumbnail views - Static pages and add social media links in app

    App Walkthrough App loads all recent videos (Fig 1 A) upon launch and start to update the thumbnails in background. Tapping on any entry loads the video (Fig 1 B). Clicking on more options icon on the top right opens a list of actions. Currently there is only one action which is share action (Fig 1 C). More actions like Bookmark are intended to be added on this list. As usual clicking on share option opens the share modal (Fig 1 D) from bottom and it shares the video embed URL. Clicking on the video plays the video in the native player (Fig 1 E). Now the clicking on playlist tab loads all playlists (Fig 1 F). Clicking on a particular playlist opens all videos in that playlist (Fig 1 G). And again clicking on a particular video opens the video page (Fig 1 B). There is a refresh button in the all videos page (Fig 1 A) and playlist videos page (Fig 1 G) tapping on which refresh the contents of table view and if any new video is uploaded since last refresh then it will show up right there. The all videos and all playlist pages have a channel button at top right to switch to different channels. Tapping on that button opens a drawer on the left with all channels listed (Fig 1 H). Tapping on a particular channel loads all videos from that channel.

  • Fig 1 A Fig 1 B Fig 1 C

    Fig 1 D

    Fig 1 E

  • Fig 1 F Fig 1 G Fig 1 H

  • Project Setup As soon as you download the project it is recommended to go to the project directory from a terminal and run command pod install. This will update the project dependancies which is crucial for the project. To learn more about cocoapods or installing one visit For more information on updating pods in your project goto installing-ios-project-dependencies/

    Requirements 1. A MAC OSX device (Macmini, Macbook Air, Macbook Pro, iMac or Mac Pro) 2. Software requirements: Xcode 6 or greater 3. Technical Requirements: Basic knowledge of programming in Objective C and know how of

    using Xcode.


    - Xcode is needed to open, customise and test any iOS application source code. It is created by Apple and is a free MAC app.

    - Click here ( or directly launch the Mac App Store app and search for Xcode. Xcode is about 2-3 GB so it will take some time to download and install it.

    - Once the Xcode app download is complete look for the “YoutubeApp.xcworkspace" (White icon, tagged as blue) file inside the YoutubeApp folder and open it.

    - For more information goto


    2.1 Xcode overview

    If you’re comfortable with Xcode interface the you can jump to 2.2 else read the basics of Xcode by clicking on Help > Xcode overview

    2.2 Changing the app name

    This is important when you want your app to be named something else. e.g. My Custom App.

    Go to Project target (cmd + 1 and click the blue icon at the top of project navigator). Click the RSSApp app target and select the Build Settings tab. Search for term “Product Name” and change the value on the right accordingly.

    For more information goto

    2.3 Changing the App Icon

    You company much be having some Logo of its own and so your custom app may need to show that Logo as App Icon. Detailed instructions are provided here the-app-icon/.

  • 2.4 Changing the App Launch Image

    Launch Image is an image which shows when your app is loading. Duration depends on your app. but generally for light apps like this it displays for 1-5 seconds. If you don’t set a launch image then a black screen is displayed and the user may think that your app is buggy or not functional or slow. Its not a good practice to not have a launch image and if you’re submitting your app to app store then its required else it will be rejected.

    Detailed instructions are provided here

    2.5 Add More Channels

    There are two channels present by default. TheViralFeverVideos and scishow. You definitely want to change them.

    - Open AppConstants.m (YoutubeApp > Helpers). - Find a line with text CONFIG_YOUTUBE_USERNAME. Basically its a comma separated string

    of all channels names. It will look like this.
 NSString * const CONFIG_YOUTUBE_USERNAME = @"TheViralFeverVideos, scishow”;

    - Change it to the desired channel names. e.g. if you want to show vsauce and TED-Ed then change the line to 
 NSString * const CONFIG_YOUTUBE_USERNAME = @“vsauce, TED-Ed”;

    - If you want to show only one channel then just type its name. e.g.

    2.5 Internationalisation

    Go to AppConstants.m and find a section with comment // Internationalisation. Below that you will find constants with self explanatory names and values. You can modify the tab name, error messages, status messages, button labels etc. I tried to cover all strings possible.

    2.5 Theming

    You can change the background colour of top bar and bottom Tab bar. And you can change the colour of text and images in tab bar and the colour of text on title bar to some other colour which will match the background colour. Theming section follows the Internationalisation section with a comment // Theming. There are 5 colour constants. They take colour in hex values prefixed by pound symbol.

    Channel drawer has a gradient as BG and it is controlled by these 2 colour constants THEME_CHANNEL_MENU_BG_COLOR_TOP THEME_CHANNEL_MENU_BG_COLOR_BOTTOM

    The text colour for channel drawer is controlled by THEME_CHANNEL_MENU_TEXT_COLOR

  • The navigation bar and tab bar colour on whole app is controlled by THEME_BG_COLOR

    The icon and text colour on whole app is controlled by THEME_FG_COLOR

    At last these is a opacity constant which controls the opacity of inactive tab. Its value should be in between 0-1. THEME_ICON_OPACITY

    Fig 2 A and B shows a personalised Navigation drawer, Navigation Bar and Tab bar. 

    Fig 2 A Fig 2 B