Android: Can't get YouTube Player API work inside of a fragment

Question

I'm trying to get my app to play a YouTube video in a fragment, as This Official Documentation said that you can play YouTube videos in fragments.

But i can't get it done.

This is my code:

SingleArticleFragment:

public class SingleArticleFragment extends YouTubePlayerSupportFragment implements
        YouTubePlayer.OnInitializedListener {
    public static final String API_KEY = "my api key";
    public static final String YOUTUBE_VIDEO_CODE = "_oEA18Y8gM0";
    // YouTube player view
    private YouTubePlayerView youTubeView;

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {

        View v = inflater.inflate(R.layout.article, container, false);
        return v;
    }

    @Override
    public void onViewCreated (View view, Bundle savedInstanceState) {
    youTubeView = (YouTubePlayerView) getActivity().findViewById(R.id.youtube_view);

    // Initializing video player with developer key
    youTubeView.initialize(API_KEY, this);
    }

    @Override
    public void onInitializationSuccess(YouTubePlayer.Provider provider, YouTubePlayer youTubePlayer, boolean b) {
        if (!b) {

            // loadVideo() will auto play video
            // Use cueVideo() method, if you don't want to play it automatically
            youTubePlayer.cueVideo(YOUTUBE_VIDEO_CODE);

            // Hiding player controls
            youTubePlayer.setPlayerStyle(YouTubePlayer.PlayerStyle.CHROMELESS);
        }
    }

    @Override
    public void onInitializationFailure(YouTubePlayer.Provider provider, YouTubeInitializationResult youTubeInitializationResult) {
        if (youTubeInitializationResult.isUserRecoverableError()) {
            youTubeInitializationResult.getErrorDialog(getActivity(), 1).show();
        } else {
            String errorMessage = "There was an error initializing the YouTubePlayer";
            Toast.makeText(getActivity(), errorMessage, Toast.LENGTH_LONG).show();
        }
    }
}

And this is article.xml:

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent" android:layout_height="match_parent"
    android:background="@color/white">
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent" android:layout_height="wrap_content"
        android:orientation="vertical">
<!-- Cover Video -->
        <com.google.android.youtube.player.YouTubePlayerView
            android:id="@+id/youtube_view"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="30dp" />

        <!-- Article Cover Photo -->
        <ImageView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/single_article_cover_photo"
            android:layout_gravity="center"
            android:adjustViewBounds="true"
            android:layout_weight=".14"/>

        <!-- Article Title -->
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/single_article_title"
            android:layout_gravity="center"
            android:textColor="@color/black"
            android:textSize="20sp"
            android:textStyle="bold"
            android:padding="10dp"
            android:layout_weight=".14"/>
    </LinearLayout>
</ScrollView>

LogCat Errors:

android.view.InflateException: Binary XML file line #11: Error inflating class com.google.android.youtube.player.YouTubePlayerView

.
.
.

Caused by: java.lang.IllegalStateException: A YouTubePlayerView can only be created with an Activity  which extends YouTubeBaseActivity as its context. 

So what LogCat is telling me: YouTube only works in Activities!, but android documentation says otherwise.

Can anybody help here please ?

Thanks in advance.

Answer 1

You are mixing two different approaches.

You can either use a YouTubePlayerView together with a YouTubeBaseActivity or you can simply use a YouTubePlayerFragment/YouTubePlayerSupportFragment. Using a YouTubePlayerView inside a YouTubePlayerFragment is simply wrong.

If you use the first approach (view + activity), you need to place the view in your XML and then set the YouTubePlayer to play inside that view.

If you use the second approach, you simply need to load the fragment in an appropriate container, initialize the YouTubePlayer and play the video.

---

SOLUTION 1

Remove the YouTubePlayerView from your XML and your code and replace it with a FrameLayout that will contain the YouTubeSupportFragment. Then, use a ChildFragmentManager to load the YouTubeSupportFragment inside that FrameLayout.

SOLUTION 2

Simply make your Activity extend the YouTubeBaseActivity, leave everything else as it is.