{"id":4498,"date":"2020-08-23T12:08:42","date_gmt":"2020-08-23T02:08:42","guid":{"rendered":"https:\/\/learntodroid.com\/?p=4498"},"modified":"2020-08-23T15:36:48","modified_gmt":"2020-08-23T05:36:48","slug":"how-to-embed-youtube-videos-in-an-android-app-with-android-youtube-player","status":"publish","type":"post","link":"http:\/\/10.0.0.14:32769\/how-to-embed-youtube-videos-in-an-android-app-with-android-youtube-player\/","title":{"rendered":"How to Embed YouTube Videos in an Android App with android-youtube-player"},"content":{"rendered":"\n<p>Adding video content to your Android app can create a great interactive experience for your users. YouTube offers a massive library of videos and a reliable video streaming platform that you can leverage to embed video into your Android app.<\/p>\n\n\n\n<p><a rel=\"noreferrer noopener\" href=\"https:\/\/developers.google.com\/youtube\/android\/player\" data-type=\"URL\" data-id=\"https:\/\/developers.google.com\/youtube\/android\/player\" target=\"_blank\">YouTube offers an official API<\/a> to allow developers to play YouTube videos in their app, however, it has not been updated in a long time and it requires the user to have the YouTube app installed on their device.<\/p>\n\n\n\n<p>A great alternative free to use, open-source API that allows you to embed YouTube videos to be played within an Android app is <a rel=\"noreferrer noopener\" href=\"https:\/\/github.com\/PierfrancescoSoffritti\/android-youtube-player\" data-type=\"URL\" data-id=\"https:\/\/github.com\/PierfrancescoSoffritti\/android-youtube-player\" target=\"_blank\">android-youtube-player<\/a> created by <a rel=\"noreferrer noopener\" href=\"https:\/\/github.com\/PierfrancescoSoffritti\" data-type=\"URL\" data-id=\"https:\/\/github.com\/PierfrancescoSoffritti\" target=\"_blank\">Pierfrancesco Soffritti<\/a>.<\/p>\n\n\n\n<p>android-youtube-player uses a WebView with an IFrame to display and expose the controls to the YouTube player. In addition to being able to play videos from YouTube, android-youtube-player also you to customize the user interface of the video player as well as offering the ability to cast YouTube videos from the player to a Chromecast device.<\/p>\n\n\n\n<p>In this post I will show you how to set up and the android-youtube-player library in your Android project and play YouTube videos embedded into your app.<\/p>\n\n\n\n<p>The code samples showed in this tutorial are available on GitHub in the following repository.<\/p>\n\n\n\n<p><a href=\"https:\/\/github.com\/learntodroid\/AndroidEmbedYouTubeVideoTutorial\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/github.com\/learntodroid\/AndroidEmbedYouTubeVideoTutorial<\/a><\/p>\n\n\n\n<p>A video tutorial for this post is available in the embedded YouTube video below.<\/p>\n\n\n\n<figure class=\"wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube\"><div class=\"wp-block-embed__wrapper\">\n<div class=\"container-lazyload preview-lazyload container-youtube js-lazyload--not-loaded\"><a class=\"lazy-load-youtube preview-lazyload preview-youtube\" href=\"https:\/\/www.youtube.com\/watch?v=yyduqrCpKGg\" data-video-title=\"How to Embed a YouTube Video in an Android App\" title=\"Play video &quot;How to Embed a YouTube Video in an Android App&quot;\">https:\/\/www.youtube.com\/watch?v=yyduqrCpKGg<\/a><noscript>Video can&#8217;t be loaded because JavaScript is disabled: <a href=\"https:\/\/www.youtube.com\/watch?v=yyduqrCpKGg\" title=\"How to Embed a YouTube Video in an Android App\">How to Embed a YouTube Video in an Android App (https:\/\/www.youtube.com\/watch?v=yyduqrCpKGg)<\/a><\/noscript><\/div>\n<\/div><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Android-Youtube-Player Tutorial<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Retrieve the Android-Youtube-Player Dependency using Gradle<\/h3>\n\n\n\n<p>To obtain the latest Gradle dependency for the android-youtube-player API check out the GitHub repository for the project at the link below.<\/p>\n\n\n\n<p><a rel=\"noreferrer noopener\" href=\"https:\/\/github.com\/PierfrancescoSoffritti\/android-youtube-player\" target=\"_blank\">https:\/\/github.com\/PierfrancescoSoffritti\/android-youtube-player<\/a><\/p>\n\n\n\n<p>In the <a rel=\"noreferrer noopener\" href=\"https:\/\/github.com\/PierfrancescoSoffritti\/android-youtube-player#download\" data-type=\"URL\" data-id=\"https:\/\/github.com\/PierfrancescoSoffritti\/android-youtube-player#download\" target=\"_blank\">Download section<\/a> of the README.md you will find the Gradle dependency.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"839\" height=\"375\" src=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/08\/Gradle-Dependency-for-android-youtube-player-API.png\" alt=\"\" class=\"wp-image-4501\" srcset=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/08\/Gradle-Dependency-for-android-youtube-player-API.png 839w, http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/08\/Gradle-Dependency-for-android-youtube-player-API-300x134.png 300w, http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/08\/Gradle-Dependency-for-android-youtube-player-API-768x343.png 768w\" sizes=\"(max-width: 839px) 100vw, 839px\" \/><\/figure>\n\n\n\n<p>We will add this dependency to the app level build.gradle file in your Android project.<\/p>\n\n\n\n<p>While we update this dependency in the gradle file, this API requires a minimum API level of 17, update the minSdkVersion in the default config section of the app level build.gradle file to API level version 17 or above.<\/p>\n\n\n\n<p>See a sample app level build.gradle file below.<\/p>\n\n\n<p><script src=\"https:\/\/gist.github.com\/learntodroid\/7efd637d6f5e90c060abf4d6534f584e.js\"><\/script><\/p>\n\n\n<h3 class=\"wp-block-heading\">Add the INTERNET Permission in the Manifest<\/h3>\n\n\n\n<p>As we will be loading YouTube videos from the Internet we will require the INTERNET permission to be added in the app&#8217;s manifest file.<\/p>\n\n\n\n<p>See a sample Android app manifest file containing the INTERNET permission.<\/p>\n\n\n<p><script src=\"https:\/\/gist.github.com\/learntodroid\/5ba2987df79d5e3aebd478a6bcb32546.js\"><\/script><\/p>\n\n\n<h3 class=\"wp-block-heading\">Play a YouTube Video using the Layout Resource<\/h3>\n\n\n\n<p>In this section of the tutorial, we will use the layout resource file for the Activity to add the YouTubePlayerView widget and get it to play automatically using XML attributes on the YouTubePlayerView.<\/p>\n\n\n\n<p>For the purposes of this tutorial, we will use the YouTube video below from the Android Developers YouTube channel introducing the Android operating system with a demo.<\/p>\n\n\n\n<figure class=\"wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube\"><div class=\"wp-block-embed__wrapper\">\n<div class=\"container-lazyload preview-lazyload container-youtube js-lazyload--not-loaded\"><a class=\"lazy-load-youtube preview-lazyload preview-youtube\" href=\"https:\/\/www.youtube.com\/watch?v=1FJHYqE0RDg\" data-video-title=\"Android Demo\" title=\"Play video &quot;Android Demo&quot;\">https:\/\/www.youtube.com\/watch?v=1FJHYqE0RDg<\/a><noscript>Video can&#8217;t be loaded because JavaScript is disabled: <a href=\"https:\/\/www.youtube.com\/watch?v=1FJHYqE0RDg\" title=\"Android Demo\">Android Demo (https:\/\/www.youtube.com\/watch?v=1FJHYqE0RDg)<\/a><\/noscript><\/div>\n<\/div><\/figure>\n\n\n\n<p>Next, we will update the Activity layout resource to add the YouTubePlayerView widget.<\/p>\n\n\n\n<p>We will set the <strong>app:videoId<\/strong> XML attribute to the YouTube video ID found in the URL of the YouTube video as per the image below. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"525\" src=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/08\/YouTube-Video-ID-1024x525.png\" alt=\"\" class=\"wp-image-4516\" srcset=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/08\/YouTube-Video-ID-1024x525.png 1024w, http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/08\/YouTube-Video-ID-300x154.png 300w, http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/08\/YouTube-Video-ID-768x394.png 768w, http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/08\/YouTube-Video-ID.png 1200w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>We will enable autoplay on the video when the Activity is displayed by setting the <strong>app:autoPlay<\/strong> XML attribute to true. We will also enable the full-screen button on the YouTubePlayer widget by setting the <strong>app:enableFullScreenButton<\/strong> XML attribute to true.<\/p>\n\n\n\n<p>See a sample Activity layout resource file with these details populated below.<\/p>\n\n\n<p><script src=\"https:\/\/gist.github.com\/learntodroid\/d9e67610f4af585b4fe66d943b7606bc.js\"><\/script><\/p>\n\n\n<p>For the full list of XML attributes available for the YouTubePlayerView widgets follow the links below to the documentation available in the GitHub repository.<\/p>\n\n\n\n<ul><li><a href=\"https:\/\/github.com\/PierfrancescoSoffritti\/android-youtube-player#videoId\">videoId<\/a><\/li><li><a href=\"https:\/\/github.com\/PierfrancescoSoffritti\/android-youtube-player#autoPlay\">autoPlay<\/a><\/li><li><a href=\"https:\/\/github.com\/PierfrancescoSoffritti\/android-youtube-player#enableAutomaticInitialization\">enableAutomaticInitialization<\/a><\/li><li><a href=\"https:\/\/github.com\/PierfrancescoSoffritti\/android-youtube-player#handleNetworkEvents\">handleNetworkEvents<\/a><\/li><li><a href=\"https:\/\/github.com\/PierfrancescoSoffritti\/android-youtube-player#useWebUi\">useWebUi<\/a><\/li><li><a href=\"https:\/\/github.com\/PierfrancescoSoffritti\/android-youtube-player#enableLiveVideoUi\">enableLiveVideoUi<\/a><\/li><li><a href=\"https:\/\/github.com\/PierfrancescoSoffritti\/android-youtube-player#showYouTubeButton\">showYouTubeButton<\/a><\/li><li><a href=\"https:\/\/github.com\/PierfrancescoSoffritti\/android-youtube-player#showFullScreenButton\">showFullScreenButton<\/a><\/li><li><a href=\"https:\/\/github.com\/PierfrancescoSoffritti\/android-youtube-player#showVideoCurrentTime\">showVideoCurrentTime<\/a><\/li><li><a href=\"https:\/\/github.com\/PierfrancescoSoffritti\/android-youtube-player#showVideoDuration\">showVideoDuration<\/a><\/li><li><a href=\"https:\/\/github.com\/PierfrancescoSoffritti\/android-youtube-player#showSeekBar\">showSeekBar<\/a><\/li><\/ul>\n\n\n\n<p>Next, we will need to update the Activity class the add the YouTubePlayerView widget as a lifecycle observer to the Activity. Adding the lifecycle observer will automatically pause the YouTube video when the Activity stops.<\/p>\n\n\n\n<p>See the code sample below for the Activity class.<\/p>\n\n\n<p><script src=\"https:\/\/gist.github.com\/learntodroid\/d2b8bd70adc63bb7d58233ee6ff2bbff.js\"><\/script><\/p>\n\n\n<h3 class=\"wp-block-heading\">Play a YouTube Video Programmatically<\/h3>\n\n\n\n<p>The android-youtube-player library also allows you the play a YouTube video programmatically in your Android app.<\/p>\n\n\n\n<p>To do this in the Activity or Fragment you will need to add an AbstractYouTubePlayerListener to the YouTubePlayerView widget.<\/p>\n\n\n\n<p>Inside the onReady(&#8230;) method of the AbstractYouTubePlayerListener you can autoplay the YouTube video by calling the loadVideo(&#8230;) method on the YouTubePlayerView widget passing the YouTube video ID as the first parameter and the start time as the second parameter.<\/p>\n\n\n<p><script src=\"https:\/\/gist.github.com\/learntodroid\/774bc96f1b5fd1c83bdc54e8af6bcec9.js\"><\/script><\/p>\n\n\n<p>If you want the YouTube to be cued up instead of autoplaying, call the cueVideo(&#8230;) method on the YouTubePlayerView widget passing the YouTube video ID as the first parameter and the start time as the second parameter.<\/p>\n\n\n<p><script src=\"https:\/\/gist.github.com\/learntodroid\/48b7051b54055d10317f946dc857a541.js\"><\/script><\/p>\n\n\n<h2 class=\"wp-block-heading\">Further Reading<\/h2>\n\n\n\n<p><a href=\"https:\/\/medium.com\/@soffritti.pierfrancesco\/how-to-play-youtube-videos-in-your-android-app-c40427215230\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/medium.com\/@soffritti.pierfrancesco\/how-to-play-youtube-videos-in-your-android-app-c40427215230<\/a><\/p>\n\n\n\n<p><a href=\"https:\/\/medium.com\/@soffritti.pierfrancesco\/customize-android-youtube-players-ui-9f32da9e8505\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/medium.com\/@soffritti.pierfrancesco\/customize-android-youtube-players-ui-9f32da9e8505<\/a><\/p>\n\n\n\n<p><a href=\"https:\/\/github.com\/PierfrancescoSoffritti\/android-youtube-player\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/github.com\/PierfrancescoSoffritti\/android-youtube-player<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Adding video content to your Android app can create a great interactive experience for your users. YouTube offers a massive library of videos and a reliable video streaming platform that<\/p>\n","protected":false},"author":1,"featured_media":4524,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"nf_dc_page":"","footnotes":""},"categories":[12],"tags":[],"acf":[],"_links":{"self":[{"href":"http:\/\/10.0.0.14:32769\/wp-json\/wp\/v2\/posts\/4498"}],"collection":[{"href":"http:\/\/10.0.0.14:32769\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/10.0.0.14:32769\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/10.0.0.14:32769\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/10.0.0.14:32769\/wp-json\/wp\/v2\/comments?post=4498"}],"version-history":[{"count":5,"href":"http:\/\/10.0.0.14:32769\/wp-json\/wp\/v2\/posts\/4498\/revisions"}],"predecessor-version":[{"id":4523,"href":"http:\/\/10.0.0.14:32769\/wp-json\/wp\/v2\/posts\/4498\/revisions\/4523"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/10.0.0.14:32769\/wp-json\/wp\/v2\/media\/4524"}],"wp:attachment":[{"href":"http:\/\/10.0.0.14:32769\/wp-json\/wp\/v2\/media?parent=4498"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/10.0.0.14:32769\/wp-json\/wp\/v2\/categories?post=4498"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/10.0.0.14:32769\/wp-json\/wp\/v2\/tags?post=4498"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}