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:

ionic start IonicProject blank
cd IonicProject
ionic platform add android
ionic platform add ios

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:

<ion-content>
    <ion-list>
        <div class="card">
            <ion-item>
                <div class="video-container">
                    <iframe src="https://www.youtube.com/embed/wyVM1evRxNw" frameborder="0" width="560" height="315"></iframe>
                </div>
            </ion-item>
        </div>
        <div class="card">
            <ion-item>
                <div class="video-container">
                    <iframe src="https://www.youtube.com/embed/gvI2ClWqHO0" frameborder="0" width="560" height="315"></iframe>
                </div>
            </ion-item>
        </div>
        <div class="card">
            <ion-item>
                <div class="video-container">
                    <iframe src="http://www.youtube.com/embed/uJAWaE11Jf4" frameborder="0" width="560" height="315"></iframe>
                </div>
            </ion-item>
        </div>
    </ion-list>
</ion-content>

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:

ionic build android
adb install -r platforms/android/ant-build/CordovaApp-debug.apk

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:

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px; height: 0; overflow: hidden;
}

.video-container iframe, .video-container object, .video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

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 C#, JavaScript, Golang and a variety of frameworks such as Angular, NativeScript, and Unity. Nic writes about his development experiences related to making web and mobile development easier to understand.