YoutubePlayer

The YoutubePlayer widget is used to play a video from Youtube.

Adding YoutubePlayer To Your Project

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. If the video URL is coming from your backend(Firestore/API), you can use the Set from Variable to set the video URL dynamically. Here are some instructions on how to set the video from a variable.

Changing The YoutubePlayer Dimensions

To change the height and width of the YoutubePlayer:

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 Width and Height.

4. There are three ways to set the video dimensions:

   1. To set to an exact size, select PX and enter the desired values.

   2. To set the dimensions as a % of the screen size, select % and enter the desired value.

   3. To make the height or width of the video the screen's height or width, just click on the infinity icon ().

Enable/Disable 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 Enable/Disable 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/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/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 is how it looks on enabling and disabling the Controls:

Show Controls Enabled

Show Controls Disabled

Full Screen Control Disabled

Changing the properties

The Properties Panel can be used to customize the behavior of your widget.

Add Padding

Here are the instructions on how to add padding.

Adjust The Alignment

Here are the instructions on adjusting the alignment.

Adding Action

To perform any action on click of the Video, add an Action in FlutterFlow. You can find the instructions on adding the Action here.

Showing Firestore Data

To show the data retrieved from your Firestore collection and document into the widget, ensure you:

1. Understand Structuring the Firebase Database.

2. Completed all steps in the Firebase Setup section for your project.

3. Retrieved Data from either collection or document.

4. Finally, to show data into the widget, follow the steps here.

Show/Hide YoutubePlayer

Please find the instructions to show/hide the widget here