How To Embed YouTube Video In Android WebView

Contents

31st March, 2023

Hey Android developer, In this tutorial we will learn how to Embed and Play YouTube Video in the Android WebView.

Step 1: Add Internet Permission

This application requires an internet connection to play the YouTube video. So, first you need to add internet access permission to the AndroidManifest.xml file.

XML

content_copy light_mode remove

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools">

    <!-- Add internet permission -->
    <uses-permission android:name="android.permission.INTERNET" />
    
    <application
        ...
        ...>
    </application>

</manifest>

Step 2: Set Up WebView in Layout XML

Now add the WebView to the Activity Layout XML file. We will load the YouTube video using this WebView.

Add-WebView-In-Android-XML-UI-Designer-Android-Studio.gif

XML

content_copy light_mode remove

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <WebView
        android:id="@+id/mWebView"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</RelativeLayout>

Step 3: Load YouTube Video From Activity

Open the activity and create an object of WebView. Set the required attribute as follows. Load the YouTube video using the WebView’s loadData() method.

Kotlin Java

content_copy light_mode remove

package com.example.myapp

import android.annotation.SuppressLint
import android.os.Bundle
import android.webkit.WebSettings
import android.webkit.WebView
import androidx.appcompat.app.AppCompatActivity

class MainActivity : AppCompatActivity() {
    @SuppressLint("SetJavaScriptEnabled")
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val myYouTubeVideoUrl = "https://www.youtube.com/embed/XUTXU6fy94E"

        val dataUrl = "<html>" +
                "<body>" +
                "<h2>Video From YouTube</h2>" +
                "<br>" +
                "<iframe width=\"560\" height=\"315\" src=\"" + myYouTubeVideoUrl + "\" frameborder=\"0\" allowfullscreen/>" +
                "</body>" +
                "</html>"

        val myWebView = findViewById<WebView>(R.id.mWebView)

        val webSettings = myWebView.settings

        webSettings.javaScriptEnabled = true
        myWebView.settings.layoutAlgorithm = WebSettings.LayoutAlgorithm.SINGLE_COLUMN
        myWebView.settings.loadWithOverviewMode = true
        myWebView.settings.useWideViewPort = true
        myWebView.loadData(dataUrl, "text/html", "utf-8")
    }
}

package com.example.myapp;

import android.annotation.SuppressLint;
import android.os.Bundle;
import android.webkit.WebSettings;
import android.webkit.WebView;

import androidx.appcompat.app.AppCompatActivity;

class MainActivity extends AppCompatActivity {
    @SuppressLint("SetJavaScriptEnabled")
    @Override
    protected void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        String myYouTubeVideoUrl = "https://www.youtube.com/embed/XUTXU6fy94E";

        String dataUrl =
                "<html>" +
                        "<body>" +
                        "<h2>Video From YouTube</h2>" +
                        "<br>" +
                        "<iframe width=\"560\" height=\"315\" src=\""+myYouTubeVideoUrl+"\" frameborder=\"0\" allowfullscreen/>" +
                        "</body>" +
                        "</html>";

        WebView myWebView = findViewById(R.id.mWebView);

        WebSettings webSettings = myWebView.getSettings();

        webSettings.setJavaScriptEnabled(true);
        myWebView.getSettings().setLayoutAlgorithm(WebSettings.LayoutAlgorithm.SINGLE_COLUMN);
        myWebView.getSettings().setLoadWithOverviewMode(true);
        myWebView.getSettings().setUseWideViewPort(true);
        myWebView.loadData(dataUrl, "text/html", "utf-8");
    }
}