Play Youtube HTML5 Embedded Video in Android Webview

How to show YouTube video in webView on Android

Try the following code: Change the URL of video in the string.

String frameVideo = "<html><body>Video From YouTube<br><iframe width=\"420\" height=\"315\" src=\"https://www.youtube.com/embed/47yJ2XCRLZs\" frameborder=\"0\" allowfullscreen></iframe></body></html>";

    WebView displayYoutubeVideo = (WebView) findViewById(R.id.mWebView);
    displayYoutubeVideo . setWebViewClient ( New  WebViewClient () {
        @Override
        public boolean shouldOverrideUrlLoading(WebView view, String url) {
            return false;
        }
    });
    WebSettings webSettings = displayYoutubeVideo . getSettings ();
    webSettings.setJavaScriptEnabled(true);
    displayYoutubeVideo.loadData(frameVideo, "text/html", "utf-8");

Play youtube/vimeo video embedded in HTML in Android WebView

So after a couple of days tinkering with this I FINALLY found the solution to my problem!

If you want to play <iframe ../> videos within your WebView you NEED to load the data with a base URL! This baseURL should be the URL of where the video is embedded, or anything to help indicate where the video can be found.

DONT do this:

// You need to give a baseUrl (e.g. the corresponding url of the HTML String)
webview.loadDataWithBaseURL(null, htmlWithVideosString,
            "text/html; charset=utf-8", "UTF-8", null);

DO THIS INSTEAD:

    /*
     VERY important to supply a baseURL for playing the videos!
     Without a baseUrl the WebView has no idea where to look for the video.
     The baseUrl will typically just be the URL that corresponds to the 
     HTML String that you are using.
    */
    mContentWebView.loadDataWithBaseURL(baseUrlOfHtmlContent, htmlWithVideosString,
            "text/html; charset=utf-8", "UTF-8", null);

Good Luck!

Also remember to set up your WebView...Like so...

    mContentWebView.setWebChromeClient(new WebChromeClient());
    mContentWebView.getSettings().setPluginState(WebSettings.PluginState.ON);
    mContentWebView.getSettings().setPluginState(WebSettings.PluginState.ON_DEMAND);
    mContentWebView.setWebViewClient(new WebViewClient());
    mContentWebView.getSettings().setJavaScriptEnabled(true);

TIP: May need to turn "hardware acceleration” on in the Manifest for this to work.

Example Hardware Acceleration On:

<application
    android:name="com.example.app"
    android:icon="@drawable/ic_launcher"
    android:label="@string/app_name"
    android:theme="@style/AppTheme"
    android:hardwareAccelerated="true">
<!-- hardwareAccelerated requires SDK 14 -->
...
</application>

How to play YouTube video inside Android WebView?

Probably not of any use, but it might be handy for future people

But remove this line:

ws.setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN);

and make sure javascript is enabled

ws.setJavaScriptEnabled(true);

These two lines caused me quite a lot of trouble when I was starting out.

play youtube video in WebView

You cannot show them embedded except perhaps on devices that have Flash.

However, if you can parse out the YouTube video details, you may be able to construct an ACTION_VIEW Intent that will show them on the YouTube application...for those Android devices that have the YouTube application.

You might also experiment with HTML5's <video> tag, which AFAIK is supported in the Browser application and may therefore work in WebView.

Android WebView - Youtube videos not playing within the application

Go to Google Developer Console and select or create a new project.
On the left sidebar, select APIs under APIs & auth and turn the status ON for YouTube Data API v3.
On the left sidebar, select Credentials and Create new key under Public API access.
When popup comes asking you to choose platform, select Android Key.
Paste the SHA-1 key and your project’s package name separated by semicolon(;).
Click on create. Now you should see the API KEY on the dashboard.

download YouTubeAPI jar from here

https://developers.google.com/youtube/android/player/downloads/

Create a layout like this

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">

<com.google.android.youtube.player.YouTubePlayerView
    android:id="@+id/youtube_player"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/black"
    android:layout_centerInParent="true" />

  </RelativeLayout>

Your activity should look something like this

public class CustomYouTubePlayer extends YouTubeBaseActivity implements   YouTubePlayer.OnInitializedListener{

private String API_KEY="your key";
private String VIDEO_ID;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    /** attaching layout xml **/
    setContentView(R.layout.youtube_player);

    /** Initializing YouTube player view **/
    VIDEO_ID = getIntent().getExtras().getString(FinalVariables.YOUTUBE_ID);
    YouTubePlayerView youTubePlayerView = (YouTubePlayerView) findViewById(R.id.youtube_player);
    youTubePlayerView.initialize(API_KEY, this);
}

@Override
public void onInitializationSuccess(Provider provider, YouTubePlayer player, boolean wasRestored) {

    player.setShowFullscreenButton(false);
    /** add listeners to YouTubePlayer instance **/
    player.setPlayerStateChangeListener(playerStateChangeListener);
    player.setPlaybackEventListener(playbackEventListener);

    /** Start buffering **/
    if (!wasRestored) {
        player.loadVideo(VIDEO_ID);
    }
}
private YouTubePlayer.PlaybackEventListener playbackEventListener = new YouTubePlayer.PlaybackEventListener() {

    @Override
    public void onBuffering(boolean arg0) {
    }

    @Override
    public void onPaused() {
    }

    @Override
    public void onPlaying() {
    }

    @Override
    public void onSeekTo(int arg0) {
    }

    @Override
    public void onStopped() {
    }

};

 private YouTubePlayer.PlayerStateChangeListener playerStateChangeListener = new YouTubePlayer.PlayerStateChangeListener() {

    @Override
    public void onAdStarted() {
    }

    @Override
    public void onError(YouTubePlayer.ErrorReason arg0) {
    }

    @Override
    public void onLoaded(String arg0) {
    }

    @Override
    public void onLoading() {
    }

    @Override
    public void onVideoEnded() {
        finish();
    }

    @Override
    public void onVideoStarted() {
    }
};
}

Just pass the video id and that's all simple as that..

Edit

if this is your YouTube link https://www.youtube.com/watch?v=rql_F8H3h9E
then your video_id=rql_F8H3h9E
Extract your video id from YouTube link and sent to this activity as extra variable.