Embed Video In Your iOS And Android Ionic Framework App

I’ve received a few requests from my subscribers for an article regarding embedding videos in their Ionic Framework application.  This could be a challenging task for a few reasons.  There are known issues with the HTML5 <video> tag for Android.  One might also ask how to make the videos responsive for multiple screen resolutions.

In this guide, I’m going to show how to do responsive embeds of YouTube videos into an Ionic Framework list of cards.

Let’s start by creating a fresh Ionic Android and iOS application:

Remember, if you’re not using a Mac, you cannot add and build for the iOS platform.

For this tutorial, we’re going to make a list of YouTube videos, each showing in their own Ionic card.  Open your www/index.html file and include the following card code to your <ion-content> block:

You’ll notice I ripped three Ionic Show episodes off YouTube for our small list of cards.  Build and install the application to your device or simulator using the following from your Terminal application:

When you run it, you’ll probably notice some of the video gets chopped off or it is too small.  This is because we haven’t made it responsive yet.

With the help of John Surdakowski and his tutorial on responsive embeds, we can add the following CSS to our www/css/style.css file:

If everything went correctly you’ll see three cards each with a perfectly fit YouTube video in each.

Nic Raboy

Nic Raboy is an advocate of modern web and mobile development technologies. He has experience in Java, JavaScript, Golang and a variety of frameworks such as Angular, NativeScript, and Apache Cordova. Nic writes about his development experiences related to making web and mobile development easier to understand.

  • divyenduz

    I guess this way we won’t be able to scroll on the video right ? as it would block the touch event. How to go about solving that ?

    • When I ran through my tutorial I was able to scroll and click the video without issues. Are you saying you’re experiencing problems?

      • Kexiang Cen

        I have the same problems, I guess. When you touched inside iframe and drag upside/downside, the whole list won’t scroll

        • What platform and OS version?

          • Kexiang Cen

            I’ve used in cordova: ios. but seems not working on Chrome as well

          • What do the logs say?

          • Kexiang Cen

            It’s actually ionic issue, when I use native scrolling, everything just works fine, I cannot use PTR and infinite scroll though. According to ionic, they will support PTR and infinite scroll in native scroll.

          • Can you please share the links to this information so readers of this article can track it?

            Thanks,

          • Alexintosh

            any news ? I’m having the same problem on beta14

          • The users who are reporting this problem, haven’t given me the information I needed. Because of this, I have no updates.

            Regards,

          • Alexintosh

            I’ll give you the informations, On android 5.0.1 with crosswalk or without, touching inside iframe and drag upside/downside, the list won’t scroll, not working on chrome too. There are no errors on the console, it is just the touch event that is not detected because happen into the iframe.

          • Can you put your project on GitHub so I can take a look?

            Regards,

          • Marcio Dias

            Hi, Nic. I’m having the same issue. It happens on Android and iOS. The list doesn’t scroll when you click in the iFrames. To scroll you need to click in the other parts.

          • I think the guys at Ionic are actively working on a fix for scrolling. I think the problems are limited to certain platform versions.

        • Weston Ganger
      • Weston Ganger

        I cant scroll on the videos on mine either. I definitely want to be able to do this.

  • Barry Mc Gettigan

    Works great. Thanks 🙂

    • No problem. I’m glad I was able to help 🙂

  • Elindor

    Thanks Nic for the tutorial. That’s about videos coming from YT, but what about videos that I have on my server, or a S3, and want to embed for the user to view ?

    • The video tag does not work correctly, as mentioned in my article. If you want to embed video, you’d have to use embed tags and embed an iframe just like what YouTube does. So you won’t be able to include video files in your project as of now.

      Does this make sense?

      • Elindor

        Wait… So you’re saying I have NO working option to display videos for the user to look at, streaming from my own server ???

        • You’d have to embed web code into your app. There are problems with the video tag so you cannot directly embed video files. You have to embed an iframe of your video like YouTube does. So yes, there are ways to do it, but they are not as quick and easy as one would hope. S3 alone will not cut it.

          Regards,

          • Elindor

            Thank you very much for your help Nic, as always you rock ! Since I absolutely need it as a feature, I will have to play around I guess !

          • No problem! I think the video issue is more of a web runtime issue. Too many old devices that can’t process HTML5 properly.

  • Chika

    Hi Nic,
    Thanks for the tutorial. I was able to implement this, however, when I play the video, it shows black screen with audio in the background. Maximizing the video to full screen however works. Any idea on what might be causing this. I am testing this on my physical devices Galaxy Note 4 and Galaxy S5.

    • Are there any error logs when you hook your device to ADB? Also what Android versions are you running?

      Regards,

  • Chika

    I am not getting any error message. I am currently running Android 4.4.4.

    I read it might be related to my Android version and iframes. I have also updated the hardware acceleration in the android manifest (android:hardwareAccelerated=”true”).

    • That is weird. It was working on my Nexus 5.

      I’m kind of stumped on this one since you’re using 4.4.4 which is a solid version of Android.

      • Chika

        Hi Nic, thanks for the insight. I was able to get it to work. The issue was actually from the build Manager I was using (Telerik App Manager). I had to test it on Moto G using the .apk file and it worked. So, I uninstalled the Telerik App Manager on my Note 4 and installed the built .apk file. Thank you for your swift response.

        • No problem! Thanks for reporting back.

  • முகிலன் முருகன்

    Great. It’s working perfect for WordPress Custom Fields too. But If my custom fields using Youtube URL, i.e. https://www.youtube.com/watch?v=XtXf7BVlz9U, how do I replace it with https://www.youtube.com/embed/XtXf7BVlz9U?

    • You’d need to make your own data parser that swaps out watch? with embed/

      I can’t recommend doing this via the mobile device. They are not powerful enough. I’d recommend doing all parsing server side before it reaches the mobile device.

      Regards,

  • Hi @nicraboy:disqus. Great post. Question though – Is it possible to embed the video without using an iFrame? My videos require session information to authenticate, which does not travel properly through the iFrame.

    • It is possible, but I wouldn’t recommend it. Although the HTML5 video tag works fine with iOS, you’re going to get awful results on various versions of Android. Until older versions of Android disappear, you’re best sticking with an iFrame whenever possible.

      Regards,

  • Hari Kishan

    Hi Nic,
    Whenever i am playing a video in the application in iPhone it is going to full screen even if i play in the iframe with dimensions specified, is there any way to solve this issue?

    • Please post your source code on GitHub so I can take a look. My assumption is that something is not right in your CSS.

      Regards,

      • Hari Kishan

        Hi Nic, when i implemented the iframe video it was coming good in android and desktop browser, but only in iPhone it is going to fullscreen. Here is the code

        • What version of iOS are you using and what device are you testing on?

          • Hari Kishan

            I am working on iOS 8 and iphone5

          • I understand what you’re talking about now. At first I thought you had meant that the videos in the list were taking up your full screen, but you were just referring to playback.

            This appears to be how Apple baked it into the operating system. It is how they process the embed tags. The only way around this would be to use a native video player I think. However, what is happening now, isn’t necessarily a bad thing. It is still very clean and has high performance.

            Regards,

  • Martin Haiek

    Hi, thanks for the post! How would it be for vimeo? because when I replace he URL for a viemo video, doen’t show the default controllers in the app while playing. Thanks!

  • Lucas

    Nic –

    Great article. For some reason, when I play videos from youtube in this manner, the video shows fine but there is no audio. I’ve posted this as a bug with Ionic, but I wonder if you might have any insight?

    https://github.com/driftyco/ionic/issues/3602

    • It might be an issue with the iOS 8 web view. You may want to open a ticket with Apache Cordova. I’m thinking it is not an Ionic problem.

      • Lucas

        Thanks, really silly… I had the hardware switch set to mute… and it treats the audio as sound effects

        If I set “Use side switch to:” in my general settings of my ipad to “Lock Rotation”, the sound works.

        So I had my hardware switch set so it was muted…

        but it doesn’t seem like the sound should be off?

        https://support.apple.com/en-us/HT2041711
        When you mute your iPad, you won’t hear these sounds:
        Alerts
        Notifications
        Sound effects
        Game audio

        You’ll still hear sound from your media, such as these:
        Music
        Podcasts
        Movies
        Videos
        TV shows

        • You may want to raise a ticket with Apache. It could be a bug that they need to fix.

          Regards,

  • Raju Smiles

    Nice..
    For youtube it is fine. what about mp4 vidoe urls.

    • Android has known problems with the HTML5 video tag. They might work with Crosswalk, but you’re probably best avoiding for now.

      Regards,

      • Mahesh

        is crosswalk better thn ionic ?

        • Crosswalk is a web runtime. Ionic is an app framework. They are two very different things.

          Regards,

        • Seika85

          That’s like asking “Is this engine better this set of car parts?”…

          You can resort to both: Built an App using the Ionic Framework AND the Crosswalk Project web runtime. (http://blog.ionic.io/crosswalk-comes-to-ionic/)

  • Keval

    Hey Nic, I have a requirement to be able to play YouTube videos via my Ionic app, but not with the YouTube app. This guide fulfills my requirement but there’s an issue; when I exit the video player (videos play in my Android’s video player), the application crashes with Cordova 5.0.0; I do not remember the alert I get after the crash, and I am on a different machine right now; so i created a new Ionic project, which has v4.3.0, to check the error, and on this version it won’t crash my app.

    And if you could, I want help with a plugin I’m working on. I have created the plugin successfully, but I somehow am not able to start the Intent for the Youtubeplayer. Even if embedding works according to this tutorial, I would prefer my video to be played using YoutubeAndroidPlayerAPI, where the player allows one to set the video’s definition and also view the video on YouTube app with the Settings icon. The UI would look like:

    • If it works in 4.3.0, but not 5.0.0, you may want to raise an issue ticket with Apache Cordova or share your error logs. Until then, I cannot really advise.

      Regards,

      • Keval

        Alright.

  • Nay Lin

    Hi, It is not a video and I tried to add a chart in App. There is no problem in iOS. But, iframe is not showing anything in Android device although it works very well in iOS and browser.

    Here is sample iframe I used.

    Thank you 🙂

    • Please keep the comments relevant to the article topic. Your question is not related to videos so instead it should be directed to either a post that is relevant or my Twitter if none exist.

      Regards,

  • Usman Napalen

    Hi, bro I get a youtube link such as ” https://www.youtube.com/watch?v=2K8_jgiNqUc ” that contain on database. I have already encoded with JSON file. So how can I take it to display in app

    • You’d have to add your own logic for displaying it in the application. For example, store the JSON response in a scope variable and add the {{videoUrl}} variable in brackets to the iFrame.

      I suggest you do some AngularJS research if you need further help doing this as it is all Angular that will be responsible.

      Regards,

  • Saurabh AV

    Hi, I have 2 doubts regarding embedding videos from the app folder:

    The video display works only after I build a signed/verified app, but not on the debug apk. It this because the app folder is not created on debug apk?
    How to I stop autoplay of the videos in the iframes?

    Your blog-posts have been really helpful, thanks and if your address these doubts I’ll be grateful!

    • I’ve not heard of any differences between debug / release. What errors are you getting in this scenario?

      The videos should not be autoplaying. You should be able to pass URL parameters to change how YouTube videos perform in the iFrame. You’d have to read the documentation for them though.

      Regards,

      • Saurabh AV

        The urls that I specify in the iframe are not youtube links, they are the video capture file urls (resolved to the local file system, as mentioned in your previous tutorial about video capture).

        I couldn’t find the app directory when in debug mode, but the files seemed to resolve in the release apk (in this case I could find the app folder but not the video files – which were copied to the app folder, again, as mentioned in your video capture tutorial)

  • Ramki

    Hi Nic ,
    Thanks for your tutorial .
    presently each video come with some size right so i want reduce the display size of the video and i want display them as a list like normal audio list type …why because when i am opening in my app it come like 2 videos coming to the page but i need at least 4 – 8 videos displayed per page.

    • I don’t necessarily understand your question, but it sounds like you should be editing the CSS to accomplish making your videos smaller.

      Regards,

  • Weston Ganger

    The videos dont want to play for me. Youtube loads up, then goes to play mode but the video never starts and sits at 0

  • Azmi Hassan

    Hi,

    I have used this method to list and play youtube in my mobile apps (using ionic). The issue is when I try to publish my apps in google play store, they rejected and notify me to modify some code and below are the email from google.

    Make sure your app doesn’t enable background playing of YouTube videos. This is a violation of the YouTube API Terms of Service.

    Please help

    • I’m not sure on that one. I’ve never had Google reject me before.

      I recommend posting this to the forums and see if anyone has had similar issues. They might have a resolution.

      Best,

      • Azmi Hassan

        thanks

        • Fher Andrade

          Hi men I have your same problem right now. Did you find any solution dot htis? Thank you in advance!!

          • Azmi Hassan

            Sorry for the late reply. I dont have any idea, google still rejected my apps. I have tried with just one video but still rejected. What I did is removed my video from the apps and now it published.

          • Fher Andrade

            Can you share your app? Just for fun and learning about Ionic.
            Well, I resolved the problem. How? What I did is, in the method pause of cordova, set src=null of my iframe, where I display my youtube video. Thanks and Regards.

        • Emem Sunday Umoh

          I am having this same problem, google is rejecting my app, according to them it enables a background playing of YouTube videos?! I do not understand. Please is there anyone with clarifications on this? please help.

      • Joel Elangovan

        Hi Nic,

        I have an app for our church, which access youtube videos from our channel , I created the app and submitted the app no problems, but when i made a new update of the app and submitted the update. i got a email from Google that my app update is rejected , reason. it violates our device and network abuse policy.Your app shouldn’t access or use a service or API in a manner that violates its terms of service. For example, make sure your app doesn’t download, monetize, or access YouTube videos in a way that violates the YouTube Terms of Service .

        This is how i access the youtube. I have a wordpress blog which has the sermons with the youtube video id. i get it to the app and then i pass it to the iframe embed code as you have in the post. DO you have any idea what might be wrong ? I got the app accepted when i submitted the app for the first time, but i have not made any changes to the youtube embed code since then.

        Regards,

        • Yea it is weird because we can embed YouTube videos pretty much everywhere. Maybe the Google review system thinks you’ve downloaded these YouTube watermarked videos?

          I’m stumped on this one. Might post in the Apache Cordova forums.

          Best,

          • Joel Elangovan

            Thanks Nic for your quick reply, I did’t really find any reason for rejection, so i made an appeal against rejection. Lets see what happens, Do u think i have to use the youtube api to show videos, but why would i pay to make calls to the youtube api, when they show ads in my videos. My videos are non-commercial and i am not monetizing them in any way.

          • Sounds like something is flawed in the review process. From what you mention it seems like it should be approved.

            Let me know how the appeal goes.

            Thanks,

          • Joel Elangovan

            Nic, I resolved my issue , the video was really playing in the background, i created a service to stop playing the player when the app is paused. updated the app successfully to playstore.

          • Dang, wouldn’t have figured that based on the vague responses in your rejection notices. They should have made it more clear.

            Any interest in sharing the source code in case others have a similar problem?

            Glad you figured it out though and I appreciate you reporting back!

          • Joel Elangovan

            Sure, I will share my code. I made a broadcast factory :

            .factory(‘broadcast’, function ($rootScope, $document) {
            var _events = {
            onPause: ‘onPause’,
            onResume: ‘onResume’
            };

            $document.bind(‘resume’, function () {
            _publish(_events.onResume, null);
            });

            $document.bind(‘pause’, function () {
            _publish(_events.onPause, null);
            });

            function _publish(eventName, data) {
            $rootScope.$broadcast(eventName, data)
            }
            return {
            events: _events
            }
            });

            then, i called the service within the controller where i have the video running :

            $scope.$on(broadcast.events.onPause, function (event) {
            var iframe = document.getElementsByTagName(“iframe”)[0].contentWindow;
            iframe.postMessage(‘{“event”:”command”,”func”:”‘ + ‘stopVideo’ + ‘”,”args”:””}’, ‘*’);
            });

            I hope this helps someone with the same problems.

          • Awesome! Thanks for sharing this. I will refer people to it with similar issues.

          • Tulgaa Purevsuren

            Really thank you for sharing,
            I’ll definitely try in my case and share my experience too.

          • jackywest

            Thank you for sharing this trick solved my problem. But i tweaked it for my app. The short solution is to trigger player.stopVideo() when the application is paused (and only stopVideo, i’ve tried pauseVideo but it didn’t worked)

            Cordova post a message to the DOM when you suspend the application.
            So basically i just add a listener for the “pause” message and trigger the stopVideo() function.

            this is what my code look like :

            player = new YT.Player(‘player-controls’, {

            player.stopVideo();

            And my app got accepted. Hope this would help other people

          • Thanks for sharing this 🙂

          • Srinivas Mobile

            @Joel Elangovan : Please help me

            I used the same code, but the app rejected
            .controller(‘VideoCtrl’, function($scope, $rootScope, $stateParams, $http, UrlService, GlobalService, $sce, $ionicScrollDelegate, broadcast) {
            $rootScope.stateIsLoading = true;

            .factory(‘broadcast’, function ($rootScope, $document) {
            var _events = {
            onPause: ‘onPause’,
            onResume: ‘onResume’
            };

            });

            I got email from google

            because it violates our device and network abuse policy and section 4.4 of the Developer Distribution Agreement. If you submitted an update, the previous version of your app is still live on Google Play.

            Here’s how you can submit your app for another review:

            Modify your app to make sure it doesn’t access or use a service or API in a manner that violates its terms of service; for example, by enabling background play of YouTube videos.
            Read through the Device and Network Abuse policy for more details and examples.
            Make sure your app is compliant with all other policies listed in the Developer Program Policies. Remember that additional enforcement could occur if there are further policy issues with your apps.
            Sign in to your Developer Console and submit your app.
            If you’ve reviewed our policies and feel this rejection may have been in error, please reach out to our policy support team. One of my colleagues will get back to you within 2 business days.

            I appreciate your support of Google Play!

            http://www.angular2.in/

        • Khoai

          Joel, how your issue? My app rejected too

          • Joel Elangovan

            Hi Khoai,
            I appealed against the rejection and i got a message today morning from google with this ” During review, we found that your app violates section 4.4 of the Developer Distribution Agreement (DDA) “…” your app allows downloading and background play of YouTube videos” . I haven’t solved it yet, but i think the problem is that google says the video is playing in the background when you embed the iframe. if it does play in the background, it should be still playing when you minimize the app, right ? But it doesnt. And another thing is i had a download mp3 button below my video, but that links to amazon s3. I am really struck at this, please keep me informed if you have found a way out. I am already battling with this issue for 2 weeks.

          • Khoai

            I replied to them but haven’t answer yet.
            Did you monetizing to your app? Maybe that is reason (http://stackoverflow.com/questions/31336935/my-app-getting-rejected-for-violation-of-section-4-4-of-the-developer-distributi)

          • Khoai

            I replied to them but haven’t answer yet. Did you monetizing to your app? Maybe that is reason (http://stackoverflow.com/questions/31336935/my-app-getting-rejected-for-violation-of-section-4-4-of-the-developer-distributi)

      • Erlin Andrés Vázquez Castellan

        Hello Nic Raboy. I have a question How I can to add a custom request header ( http referer ) YouTube embed gives “restricted from playback on certain sites” The problem is due to lack of HTTP header “Referer” field. sorry for my English. Thanks in advance.

  • Nathaniel

    Running this on iOS with ATS disabled. Works fine with 1 video, but the page doesn’t load with multiple videos. Any ideas anyone? Thanks!

  • Luis Serota

    Is there a way to play the youtube video embedded in the page, and not have it open up to fill the screen? My guess is no, but if someone has a solution to this I will be eternally grateful. E.g. I want the video to play in the content view and be able to access other parts of the view.

    Thanks!

    • Luis Serota

      Right now when I run my app in the browser it works as I want it to, but when I run it in the simulator it opens up the iOS media player :-/

  • 1.how to compress the video size when upload to server in ionic….because i have 50 mb …that is only 20 sec…
    2.how to choose the videos from library in ionic
    3. how to upload multiple images to server in ionic
    please send it soon to my mailId…thanks in advance

  • Shridar Gowda

    how to upload captured video to amazon s3 bucket by using free source plugins..

  • Spooky Mindz

    Hi
    I use this method and create a app when video start play and switch into fullscreen after that if I press mobile back button it close the app. I want it will do something like exist full screen or back to pervious view.
    Is it possible?
    Any suggestions.
    Thanks

  • Gunasekhar

    Hi Nic,

    I am passing src from controller, but it is displaying empty screen.

    scope.url = ‘http://www.youtube.com/embed/uJAWaE11Jf4’;

  • Dara Kaing

    yes it work but how about video facebook how to embed

    • Niketa Bamta

      Did you able to find the solution to play for facebook video ?

  • guru nadig

    hi nic! firstly i’m big fan of ur tuts.. i got this iframes working fine in android, but now i have to build for ios and i am stuck as the iframes r not even showing up on ios emulator/ on ios device, its coming blank! what could be the reason ?

  • Later Watch

    Hi Nic

    is it possible to parse the embeded youtube link from a JSON file that has more than one youtube link? e.g.

    instead of one link.

    • You’d have to do your own parsing, but it should be possible.

      • Later Watch

        Ill try it out and thank you for the quick response much appreciated

  • eli

    Hey there, I have a little question.
    I’m looking for a way to display videos on my Ionic app, but disable almost everything (including scrolling through the video).
    Do you have any suggestion about how to do it?