Skip to main content

YoutubePlayer

The YouTubePlayer widget in FlutterFlow allows you to seamlessly integrate and play YouTube videos within your app. It offers customizable playback options and an intuitive interface for enhancing the user experience.

Adding YoutubePlayer Widget​

To add the YoutubePlayer widget in your project:

Simply drag the YoutubePlayer widget from the Base Elements tab (in the Widget Panel) or add it directly from the widget tree.

Setting The Video URL​

The YoutubePlayer widget uses Youtube's video URL to play the video. When you add the YoutubePlayer to your app, by default the URL is set to play a random video. You can change the Video URL by using the URL property.

To set the Youtube Video URL:

  1. Select the YoutubePlayer from the widget tree or from the canvas area.
  2. Move to the Property Editor and scroll down to the Youtube Player section.
  3. Find the URL property and enter the URL for the new video.

Control Looping Video​

By default, The Youtube video starts playing again after it is finished playing. You can change this behavior using the Loop Video property.

To control looping:

  1. Select the YoutubePlayer from the widget tree or from the canvas area.
  2. Move to the Property Editor and scroll down to the Youtube Player section.
  3. Find the Loop Video property, keep it checked for looping the video or uncheck to stop looping. Click on it.

Muting The Video​

To mute the video:

  1. Select the YoutubePlayer from the widget tree or from the canvas area.
  2. Move to the Property Editor and scroll down to the Youtube Player section.
  3. Find the Mute Video property and click to checkmark it.

Enable or Disable Video Controls​

By default, when the video is being played, different controls are shown such as volume, play-pause, subtitles, fullscreen. You can enable or disable these controls using the show controls property.

To enable or disable video controls:

  1. Select the YoutubePlayer from the widget tree or from the canvas area.
  2. Move to the Property Editor and scroll down to the Youtube Player section.
  3. Find the Show Controls property, keep it checked to show controls, or uncheck to hide the controls.
  4. (Optional) To disable the fullscreen control, uncheck the Show Full Screen Control.

Here's how it looks on enabling and disabling the Controls:

show-controls-enabled