android-youtube-player icon indicating copy to clipboard operation
android-youtube-player copied to clipboard

Change the black border around videos to white?

Open crearo opened this issue 3 years ago • 9 comments

When the aspect ratio between the video and the layout doesn't match, the background bordered around is black. Is it possible to make it white?

crearo avatar Sep 20 '20 22:09 crearo

The black borders are coming actually from the youtube interface and has nothing to do directly with the layouts of this API.

The only way to get rid of this borders is to set the YouTubePlayerView's width:height ratio to the same as the width:height ratio of the youtube video, which is by default 16:9, but not always). Wrapping width and adjusting only the height would however not work, you haveto set both dimensions to match a 16:9 ratio. What you can do however is to set your width and wrap your height, this would scale down/up your player to a 16:9 ratio automatically (which is however not much of a difference).

@PierfrancescoSoffritti is the match_parent of the width of the layout a bug or limitation of the IFrame API?

If you have videos that have not the 16:9 ratio on Youtube, then the youtube interface (iframe API) automatically paddings to 16:9 and adds black borders. You can with the full screen function of this API get rid of the borders. This would match the player view's dimensions to its parents layout width and height. To be able to completely remove the borders now you have to know the dimensions of the video to set the parents width and height to this ratio.

@PierfrancescoSoffritti is there a way to get the youtube's video dimensions to adjust specific layouts?

EDIT: It seems that there is already an issue open for a related problem, #71.

malliaridis avatar Oct 02 '20 13:10 malliaridis

Yeah adding support for 18:9 required more work that I had bandwidth for. Unfortunately I don't remember all the details anymore.

is the match_parent of the width of the layout a bug or limitation of the IFrame API?

could you elaborate on this question?

PierfrancescoSoffritti avatar Oct 03 '20 10:10 PierfrancescoSoffritti

If I will find some time maybe I can support you on this one. I think this is one of the main features requested from the community (next to the loading issues reported multiple times).

The player is using the 16:9 ratio when you set a specific width (e.g. 200dp) and set the height to wrap_content. If you however set the height to a specific value (e.g. 200dp) and the width to wrap_content, it doesn' t use the 16:9 ratio anymore, but matches the width to it's parent (hence match_parent). Same applies when you set both to wrap_content, the width is matched to it's parent and the height scales to 16:9 ratio.

That means that the wrap_content on width does not apply correctly.

malliaridis avatar Oct 03 '20 12:10 malliaridis

The idea is that when the height is set to wrap_content, we force it to respect the 16:9 ratio. See SixteenByNineFrameLayout.

The width shouldn't be affected. Maybe we should force the same constraint when the width is wrap_content.

PierfrancescoSoffritti avatar Oct 03 '20 12:10 PierfrancescoSoffritti

Ah, I see. Well, considering the actual issue with the black padding from youtube that is not customizable, we should maybe consider working with a "wrapper" layout first that wraps the actual aspect ratio of the video and holds the video in it's original dimensions. That way we can apply any further styling logic on our own.

E.g. when one of the two dimensions is wrap_content, we apply the aspect ratio of the video. If an attribute like app:ratio="16:9" is applied, we apply the ratio the user chooses. That way, the user can apply also a background to the wrapper for changing the background / border color with e.g. app:videoBackground="@android:color/white".

Is my vision explained well? And does it sound feasible for you?

malliaridis avatar Oct 03 '20 13:10 malliaridis

I think the only problem here is knowing the aspect ratio of the video. I am not 100% sure, but we probably need to use the YouTube Data API to get it. And we definitely don't want to bundle that with this library. If that's the case, I think there is no easy solution to this problem.

PierfrancescoSoffritti avatar Oct 04 '20 06:10 PierfrancescoSoffritti

Yup, I worked around this by setting the exact aspect ratio.

crearo avatar Oct 04 '20 14:10 crearo

Is there any solution for this black border to convert into white or any other color?

RaviUmraliya avatar Jul 11 '21 09:07 RaviUmraliya

@crearo how did you set the exact aspect ratio ?

mariuspena avatar Jul 14 '21 16:07 mariuspena