How to Integrate YouTube Video Player in a Flutter Application
Tags: beginners, tutorial, mobile, flutter
Published: 2024-03-12 14:11:20

<!-- wp:paragraph -->
<p>YouTube is one of the world’s popular social media platforms for hosting and sharing videos. You can find a great list of music, movies, tutorials, documentaries and interviews in any domain there. Many enterprises, corporations and freelancers create and share videos on their various channels to enhance communication and provide a better user experience on the various services they offer. <a href="http://Youtube.com" target="_blank" rel="noreferrer noopener">YouTube</a> has become an indispensable social asset in the daily lives of many entrepreneurs and organizations.</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2 id="Objectives"><a href="https://hackmd.io/OVg4JekzQImhG3ym6BP07A#Objectives"></a></h2>
<!-- /wp:heading -->

<!-- wp:heading -->
<h2 id="Objectives">Objectives</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>This guide will cover the necessary steps you need to follow to integrate YouTube into your Flutter application. In a nutshell, you will build a simple application like in the demo below.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><a href="https://drive.google.com/drive/folders/1WNLfxjnQEFAv0rBrqvVVHFQNx9pP4ptF?usp=sharing" target="_blank" rel="noreferrer noopener">Youtube Flutter Player Demo in Drive</a></p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2 id="Common-Use-Cases-Where-You-Should-Add-YouTube-Integration-in-Your-Mobile-App"><a href="https://hackmd.io/OVg4JekzQImhG3ym6BP07A#Common-Use-Cases-Where-You-Should-Add-YouTube-Integration-in-Your-Mobile-App"></a></h2>
<!-- /wp:heading -->

<!-- wp:heading -->
<h2 id="Common-Use-Cases-Where-You-Should-Add-YouTube-Integration-in-Your-Mobile-App">Common Use Cases Where You Should Add YouTube Integration in Your Mobile App</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Before diving into the main subject, it’s important to know when and where to integrate YouTube into your application. Some of the common use cases are:</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3 id="Integrating-Video-Tutorials"><a href="https://hackmd.io/OVg4JekzQImhG3ym6BP07A#Integrating-Video-Tutorials"></a></h3>
<!-- /wp:heading -->

<!-- wp:heading {"level":3} -->
<h3 id="Integrating-Video-Tutorials">Integrating Video Tutorials</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>One of the easiest ways to enhance user experience and improve engagement is by adding video tutorials from your channel or various subject matters that can interest your audience.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>If you own a course or food application or a simple informational application, integrating YouTube can help users easily and efficiently get access to video content from your various channels that align with their interests.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3 id="Integrating-in-Movies-Application"><a href="https://hackmd.io/OVg4JekzQImhG3ym6BP07A#Integrating-in-Movies-Application"></a></h3>
<!-- /wp:heading -->

<!-- wp:heading {"level":3} -->
<h3 id="Integrating-in-Movies-Application">Integrating in Movies Application</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Adding movie trials or reviews via YouTube in your movie application allows users to get a preview of a specific movie and helps them decide whether to watch it or not. You can equally add behind-the-scene footage to spice up the app and encourage users to spend longer time on your application hence improving user engagement.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3 id="Informational-oriented-application"><a href="https://hackmd.io/OVg4JekzQImhG3ym6BP07A#Informational-oriented-application"></a></h3>
<!-- /wp:heading -->

<!-- wp:heading {"level":3} -->
<h3 id="Informational-oriented-application">Informational oriented application</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Informational-centered applications that provide articles, blog posts, and news about a variety of subjects can be enhanced by adding video-related content to improve user comprehension further.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3 id="Monetization"><a href="https://hackmd.io/OVg4JekzQImhG3ym6BP07A#Monetization"></a></h3>
<!-- /wp:heading -->

<!-- wp:heading {"level":3} -->
<h3 id="Monetization">Monetization</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Implementing a YouTube player with ad support in your application provides a revenue stream for your application. For example, if you have a food recipe application, you can generate revenue by displaying YouTube videos with ads before, during or after the video.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3 id="Live-Stream-Events"><a href="https://hackmd.io/OVg4JekzQImhG3ym6BP07A#Live-Stream-Events"></a></h3>
<!-- /wp:heading -->

<!-- wp:heading {"level":3} -->
<h3 id="Live-Stream-Events">Live Stream Events</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>You can embed YouTube live stream video using the YouTube LIVE API into your application easily for real-time interaction with your audience, product launch or Q&amp;A sessions which can improve the kind of services you offer and user engagement.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3 id="Product-Demonstrations"><a href="https://hackmd.io/OVg4JekzQImhG3ym6BP07A#Product-Demonstrations"></a></h3>
<!-- /wp:heading -->

<!-- wp:heading {"level":3} -->
<h3 id="Product-Demonstrations">Product Demonstrations</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>For educational applications or e-commerce applications, you can integrate YouTube videos to showcase the product features, the benefits of using it and real-life usage to the users in-app.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3 id="Travel"><a href="https://hackmd.io/OVg4JekzQImhG3ym6BP07A#Travel"></a></h3>
<!-- /wp:heading -->

<!-- wp:heading {"level":3} -->
<h3 id="Travel">Travel</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>A mobile app that includes travel guides or travel-related content with embedded YouTube videos showcasing popular destinations, attractions, or travel tips.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>For example, users can easily visualize popular spots instantly rather than navigating through a list of selected images.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3 id="Fitness-and-Music"><a href="https://hackmd.io/OVg4JekzQImhG3ym6BP07A#Fitness-and-Music"></a></h3>
<!-- /wp:heading -->

<!-- wp:heading {"level":3} -->
<h3 id="Fitness-and-Music">Fitness and Music</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>In fitness applications, you can incorporate YouTube videos that demonstrate and guide users on how to perform certain movements.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Keep in mind that while integrating these YouTube features into your mobile application, it’s important to always ensure compliance with YouTube’s terms of service.</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2 id="Integrating-YouTube-in-a-Flutter-Application"><a href="https://hackmd.io/OVg4JekzQImhG3ym6BP07A#Integrating-YouTube-in-a-Flutter-Application"></a></h2>
<!-- /wp:heading -->

<!-- wp:heading -->
<h2 id="Integrating-YouTube-in-a-Flutter-Application">Integrating YouTube in a Flutter Application</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>In this section, we will work you through how to integrate a Youtube player into your <a href="https://www.learn-dev-tools.blog/what-is-the-flutter-framework-a-beginners-introduction-to-flutter/">Flutter</a> application.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3 id="Prerequisites"><a href="https://hackmd.io/OVg4JekzQImhG3ym6BP07A#Prerequisites"></a></h3>
<!-- /wp:heading -->

<!-- wp:heading {"level":3} -->
<h3 id="Prerequisites">Prerequisites</h3>
<!-- /wp:heading -->

<!-- wp:list -->
<ul><!-- wp:list-item -->
<li><a href="https://pub.dev/packages/youtube_player_flutter" target="_blank" rel="noreferrer noopener">YouTube Player Flutter</a></li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Basic Dart Knowledge</li>
<!-- /wp:list-item --></ul>
<!-- /wp:list -->

<!-- wp:heading {"level":3} -->
<h3 id="Creating-a-Flutter-Application"><a href="https://hackmd.io/OVg4JekzQImhG3ym6BP07A#Creating-a-Flutter-Application"></a></h3>
<!-- /wp:heading -->

<!-- wp:heading {"level":3} -->
<h3 id="Creating-a-Flutter-Application">Creating a Flutter Application</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p><a href="https://www.learn-dev-tools.blog/how-to-install-flutter-on-windows-in-a-few-steps/">Install Flutter</a>, open your Android Studio editor and create a new Flutter project or open your terminal and run the following command to get started with a Flutter project.</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>flutter create example_project_youtube</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p><code>example_project_youtube</code> is the name of the project, and you can replace it with any name you want. Once the project is complete, choose an emulator or connect your phone and run the following command to launch it.</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>flutter run</code></pre>
<!-- /wp:code -->

<!-- wp:heading {"level":3} -->
<h3 id="Adding-YouTube-Package"><a href="https://hackmd.io/OVg4JekzQImhG3ym6BP07A#Adding-YouTube-Package"></a></h3>
<!-- /wp:heading -->

<!-- wp:heading {"level":3} -->
<h3 id="Adding-YouTube-Package">Adding YouTube Package</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>To add the <code>youTube_player_flutter</code> package, open another terminal and run the following command:</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>flutter pub add youtube_player_flutter</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p><code>youtube_player_flutter</code> plugin for playing or streaming inline YouTube videos using the official iFrame player API. This plugin supports both Android and iOS.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>This will add the <code>youtube_player_flutter</code> package in the dependencies section of your <code>pubspec.yaml</code> located at the root of your project.</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>dependencies:
  flutter:
    sdk: flutter

  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  youtube_player_flutter: ^8.1.2</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>Now create two dart files in which one will contain the video JSON data model and the last will be the YouTube player page.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>We also have the <code>main.dart</code> file which looks like this:</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>import 'package:flutter/material.dart';
import 'package:flutter_app_youtube/screens/YoutubeScreen.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.red),
        useMaterial3: true,
      ),
      home: const YouTubeScreen(),
    );
  }
}</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>Create a <code>lib/model/VideoModel.dart</code> and add the following code:</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>import 'dart:convert';

class VideoModel {
  int? id;
  String? name;
  String? url;

  VideoModel(this.id, this.name, this.url);

  VideoModel.fromJson(Map&lt;String, dynamic> json) {
    id = json&#91;"id"];
    name = json&#91;'name'].toString();
    url = json&#91;'url'];
  }
}</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>Create YouTubeVideoScreen.dart</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>import 'package:flutter/material.dart';
import 'package:youtube_player_flutter/youtube_player_flutter.dart';

class YouTubeScreen extends StatefulWidget {

  const YouTubeScreen({Key? key}) : super(key: key);

  @override
  _YouTubeScreenState createState() => _YouTubeScreenState();
}

class _YouTubeScreenState extends State&lt;YouTubeScreen> {
  String? videoId;

  @override
  void initState() {
    super.initState();
    videoId = 't31fj-0t3Dw';
  }

  @override
  Widget build(BuildContext context) {
    return YoutubePlayer(
      controller: YoutubePlayerController(
        initialVideoId: videoId!,
        flags: const YoutubePlayerFlags(
          autoPlay: true, 
          mute: false
        )
      )
    );
  }
}</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>A Youtube video url is generally in the form:</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><code>https://www.youtube.com/watch?v='Your video id here'</code></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>The <code>v</code> in the url contains the <code>id</code> of your video. So put this id in the <code>videoId</code> variable and test your application</p>
<!-- /wp:paragraph -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://hackmd.io/_uploads/HkUCW6w56.jpg" alt="integrate_youtube_vide"/></figure>
<!-- /wp:image -->

<!-- wp:heading {"level":3} -->
<h3 id="Incorporating-Features-and-Customizing-YouTube-Player"><a href="https://hackmd.io/OVg4JekzQImhG3ym6BP07A#Incorporating-Features-and-Customizing-YouTube-Player"></a></h3>
<!-- /wp:heading -->

<!-- wp:heading {"level":3} -->
<h3 id="Incorporating-Features-and-Customizing-YouTube-Player">Incorporating Features and Customizing YouTube Player</h3>
<!-- /wp:heading -->

<!-- wp:heading {"level":3} -->
<h3 id="Show-Video-Progression-Indicator"><a href="https://hackmd.io/OVg4JekzQImhG3ym6BP07A#Show-Video-Progression-Indicator"></a></h3>
<!-- /wp:heading -->

<!-- wp:heading {"level":3} -->
<h3 id="Show-Video-Progression-Indicator">Show Video Progression Indicator</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>By default, the <code>showVideoProgressIndicator</code> is set to true, you can set it to false if you don’t want to see the video progression indicator.</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>showVideoProgressIndicator: false</code></pre>
<!-- /wp:code -->

<!-- wp:heading {"level":3} -->
<h3 id="Progress-Indicator-Color"><a href="https://hackmd.io/OVg4JekzQImhG3ym6BP07A#Progress-Indicator-Color"></a></h3>
<!-- /wp:heading -->

<!-- wp:heading {"level":3} -->
<h3 id="Progress-Indicator-Color">Progress Indicator Color</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Use the <code>progressIndicatorColor</code> attribute to change the color of the video progress indicator. For example, below we have changed the color to green:</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>progressIndicatorColor: Colors.green</code></pre>
<!-- /wp:code -->

<!-- wp:heading {"level":3} -->
<h3 id="Setting-FullScreen-Mode"><a href="https://hackmd.io/OVg4JekzQImhG3ym6BP07A#Setting-FullScreen-Mode"></a></h3>
<!-- /wp:heading -->

<!-- wp:heading {"level":3} -->
<h3 id="Setting-FullScreen-Mode">Setting FullScreen Mode</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>To support Full screen you need to wrap the player in the <code>YoutubePlayerBuilder</code>:</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>YoutubePlayerBuilder(
  player: YoutubePlayer(
    controller: _controller,
  ),
  builder: (context, player){
    return Column(
      children: &#91;
        player,
      ]
    );
  }
),</code></pre>
<!-- /wp:code -->

<!-- wp:heading {"level":3} -->
<h3 id="Adding-Players-Control"><a href="https://hackmd.io/OVg4JekzQImhG3ym6BP07A#Adding-Players-Control"></a></h3>
<!-- /wp:heading -->

<!-- wp:heading {"level":3} -->
<h3 id="Adding-Players-Control">Adding Players Control</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p><code>YoutubePlayerFlags</code> allows you to define player flags. In the example below, we set the <code>autoplay</code> to false, disabled the audio by setting <code>mute</code> to true, enabled caption, and hide controls, looped the video and disabled video HD mode.</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>YoutubePlayerFlags(
  autoPlay: false,
  mute: false,
  enableCaption: true,
  loop: true,
  forceHD: false,
  hideControls: true
)</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>If you want to know more you can check the <a href="https://pub.dev/documentation/youtube_player_flutter/latest/youtube_player_flutter/YoutubePlayerFlags-class.html" target="_blank" rel="noreferrer noopener">YoutublePlayerFlags Class</a> and equally learn how to <a href="https://pub.dev/packages/youtube_player_flutter#want-to-customize-the-player" target="_blank" rel="noreferrer noopener">customize other features</a>.</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2 id="What’s-Next"><a href="https://hackmd.io/OVg4JekzQImhG3ym6BP07A#What’s-Next"></a></h2>
<!-- /wp:heading -->

<!-- wp:heading -->
<h2 id="What’s-Next">What’s Next</h2>
<!-- /wp:heading -->

<!-- wp:heading {"level":3} -->
<h3 id="Conclusion"><a href="https://hackmd.io/OVg4JekzQImhG3ym6BP07A#Conclusion"></a></h3>
<!-- /wp:heading -->

<!-- wp:heading {"level":3} -->
<h3 id="Conclusion">Conclusion</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>In this guide, we have learned how to integrate a YouTube video player into a Flutter application. By following the step-by-step guide and code examples provided, you can enhance your app's functionality and user experience by seamlessly incorporating YouTube videos. Remember to handle error cases gracefully and consider implementing additional features like Playback Speed and playlist integration to further enrich your app.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Flutter YouTube Player increases the productivity of your applicant by providing visual and dynamic content that makes your application both informative and engaging. You can add a YouTube video player in any application as you can see through the use cases provided earlier.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>With the power of Flutter and YouTube integration, the possibilities are endless.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Happy coding!<br><a href="https://github.com/Gunkev/youtube_player_flutter" target="_blank" rel="noreferrer noopener">Full GitHub Code of Tutorial</a>.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3 id="Resources"><a href="https://hackmd.io/OVg4JekzQImhG3ym6BP07A#Resources"></a></h3>
<!-- /wp:heading -->

<!-- wp:heading {"level":3} -->
<h3 id="Resources">Resources</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p><a href="https://pub.dev/packages/youtube_player_flutter">https://pub.dev/packages/youtube_player_flutter</a></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><a href="https://www.linkedin.com/pulse/why-considering-video-integration-mobile-apps-profitable-abbas/">https://www.linkedin.com/pulse/why-considering-video-integration-mobile-apps-profitable-abbas/</a></p>
<!-- /wp:paragraph -->