In this android tutorial we are going to learn how to embed and play Youtube video in android WebView. There are some situations where you may want to embed video in your android application, the simplest way to achieve this is to embed the video code in your android WebView.

You can check my previous tutorial on how to load external web page inside Android WebView[i][/i]

There are so many problems associated with this concept.

1. The video is hard to go full screen

2. when the video stops playing, it is difficult to restart the video again without reloading the WebView control.

To fix these problem, I wrote a tutorial that uses a custom WebView and chrome client. Feel free to check the tutorial How to play YouTube video inside Android WebView

Before we start, the first thing I will do is to list the environment and tools I used in this android tutorial but feel free to use whatever environment or tools you are familiar with.

Windows 7

Android Studio

Samsung Galaxy Fame Lite

Min SDK 14

Target SDK 19

To create a new android application project, following the steps as stipulated below.

Go to File menu

Click on New menu

Click on Android Application

Enter Project name: AndroidDictionaryApplication

Package: com.inducesmile.androiddictionaryapplication

Keep other default selections.

Continue to click on next button until Finish button is active, then click on Finish Button

Once you are done with creating your project, make sure you change the package name if you did not use the same package.

Activity_Main.xml
The main layout of our application will contain a WebView. You can drag and drop the View control to the project activity_main.xml. The xml code snippet for the layout is shown below.

<RelativeLayout xmlns:android=""
    xmlns:tools=""
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <WebView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/webView"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
        android:padding="10dp"
        android:layout_alignParentStart="true" />

</RelativeLayout>

Since we are going to use internet in this application, we are going to add internet persimmon in our Manifest.xml file. In the MainActivity section, we also enable Hardware accelerated to true. This is in case if it is not already enable in your device. The following is the update code in the Manifest.xml file.

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android=""
    package="" >
    <uses-permission android:name="android.permission.INTERNET"/>
    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >
        <activity
            android:name=".MainActivity"
            android:hardwareAccelerated="true"
            android:label="@string/app_name" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>
</manifest>

MainActivity.java

In the MainActivity.java file, we will get the instances of our WebView controls. We will convert the iFrame code of our embed YouTube video to a string.

In other to use the WebView to play our video rather than going to the external website, we created a WebView client to replace the default WebView client of the WebView.

With the WebView web settings, we enabled Javascript and load the video iFrame string to the webview instance by using the loaddata() of the WebView.

The final code in MainActvity.java is shown below.

package inducesmile.com.androidembedvideo;

import android.os.Bundle;
import android.support.v7.app.ActionBarActivity;
import android.view.Menu;
import android.view.MenuItem;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;

public class MainActivity extends ActionBarActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        String frameVideo = "<html><body>Youtube video .. <br> <iframe width=\"320\" height=\"315\" src=\"https://www.youtube.com/embed/lY2H2ZP56K4\" frameborder=\"0\" allowfullscreen></iframe></body></html>";

        WebView displayVideo = (WebView)findViewById(R.id.webView);
        displayVideo.setWebViewClient(new WebViewClient(){
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                return false;
            }
        });
        WebSettings webSettings = displayVideo.getSettings();
        webSettings.setJavaScriptEnabled(true);
        displayVideo.loadData(frameVideo, "text/html", "utf-8";
    }
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }
    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();

        //noinspection SimplifiableIfStatement
        if (id == R.id.action_settings) {
            return true;
        }

        return super.onOptionsItemSelected(item);
    }
}

Save the file and run your project. If everything works for you, the project will appear like this in your device.



You can download the code for this tutorial below. If you are having hard time downloading the tutorials, kindly contact me.

You can download the complete source code for this project here http://inducesmile.com/android/embed-and-play-youtube-video-in-android-webview/

Remember to subscribe with your email so that you will be among the first to receive our new post once it is published

You may not believe it, but i ran into the exact same problem