YouTube player does not size itself properly on API 28

[musa211]

Bug Report

Description of the Bug

On my API 28 emulator I noticed that the YouTube embed player appears zoomed in, only the top right quadrant of the video is visible. In the screenshot below, the center message is a youtube video.

Environment details

Android Version: 9
API Version: 28

Tested devices:
Android Studio Emulator Pixel 2 API 28
Android Studio Emulator Pixel 3 API 28

Youtube Player Library Version: 12.1.2

Steps to reproduce the bug

1. Use Android Studio Emulator device with API 28
2. Programmatically create YoutubePlayer
3. Add to ViewGroup (LinearLayout) which lies in a RecyclerView
4. Run the application on the targeted device (as mentioned earlier)
5. Navigate to that YoutubePlayer on the emulator
6. Observe the player is zoomed in and only shows the top right quadrant
7. Video is still clickable and you can hear audio in the background

What I've tried

• Tested on APIs above 28 to see if it's an isolate case to level 28 (same code works normally on 29+)
• Set layout parameters to MATCH_PARENT, WRAP_CONTENT for width and height respectively, and set margins and paddings to 0
• Confirmed hardwareAccelerated is set to true

Additional information

When navigating to player	When clicked on	Works on Pixel3 with API 29

Relevant codeblock

        val youTubePlayerView = YouTubePlayerView(view.context).apply {
            enableAutomaticInitialization = false
        }

        val iFramePlayerOptions = IFramePlayerOptions.Builder()
            .rel(0)
            .autoplay(0)
            .controls(1)
            .build()

        val youTubePlayerListener = object : AbstractYouTubePlayerListener() {
            override fun onReady(youTubePlayer: YouTubePlayer) {
                youTubePlayer.cueVideo(videoId, 0f)
                youTubePlayerView.visibility = View.VISIBLE
            }

            override fun onError(youTubePlayer: YouTubePlayer, error: PlayerConstants.PlayerError) {
                youTubePlayerView.visibility = View.GONE
                super.onError(youTubePlayer, error)
            }
        }

        viewGroup.addView(youTubePlayerView)
        youTubePlayerView.initialize(youTubePlayerListener, iFramePlayerOptions)
        lifecycle.addObserver(youTubePlayerView)

[PierfrancescoSoffritti]

Can you please replicate in the sample app or provide a simple project replicating the issue?

[musa211]

Hey Pier,

Thank you for replying and yes I was able to replicate in the sample app.

Environment details

Android Version: 9
API Version: 28

Tested device(s):
Android Studio Emulator Pixel 3 API 28

Youtube Player Library Version: 12.1.2

Steps to reproduce the bug

Use Android Studio Emulator device with API 28

1. Clone the library
2. Use Android Studio Emulator device with API 28
3. Run the core-sample-app on the targeted device
4. Clicked the top left corner tab
5. Navigate through each example: (Simple, Fullscreen, Complete, Default, Recycler etc.)
6. Observe Youtube Player only shows the top right quadrant:

• Video can still be played, you can hear the audio in the background
• Just can't see the video it self
• In some cases you'll see a mostly white screen and sometimes just completely black screen
• If you click the bottom left quadrant of the player you can stop the video

Additional information

Pixel 3 API 28: Simple	Pixel 3 API28: Playlist

Video demo:

OnSampleAppDemo.mp4

[PierfrancescoSoffritti]

Cool, thanks for reporting this and for the repro steps :) I will try to look into it this weekend, if you have ideas feel free to discuss here and/or send a PR

[anonym24]

yes, I reproduced it also with simple example from official core-sample-app

#1213 (comment)

it's not just 28 API, also 27, and I believe many others.

[anonym24]

so mb this issue is also related to missing controls in fullscreen mode via toggle fullscreen js command?

#1213

basically, now this library becomes unsuable for any modes on many APIs

[anonym24]

It seems some crazy issue from Google itself (I guess even more Indian devs in this company now).

So I tried to test clean JS YouTube API from official example:

<!DOCTYPE html>
<html>
  <body>
    <!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
    <div id="player"></div>

    <script>
      // 2. This code loads the IFrame Player API code asynchronously.
      var tag = document.createElement('script');

      tag.src = "https://www.youtube.com/iframe_api";
      var firstScriptTag = document.getElementsByTagName('script')[0];
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

      // 3. This function creates an <iframe> (and YouTube player)
      //    after the API code downloads.
      var player;
      function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
          height: '390',
          width: '640',
          videoId: 'M7lc1UVf-VE',
          playerVars: {
            'playsinline': 1
          },
          events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
          }
        });
      }

      // 4. The API will call this function when the video player is ready.
      function onPlayerReady(event) {
        event.target.playVideo();
      }

      // 5. The API calls this function when the player's state changes.
      //    The function indicates that when playing a video (state=1),
      //    the player should play for six seconds and then stop.
      var done = false;
      function onPlayerStateChange(event) {
       
      }
      function stopVideo() {
        player.stopVideo();
      }
    </script>
  </body>
</html>

Created player.html file and opened in Google Chrome.

Here's results:

initial state (not playing yet):

I clicked on the player frame to play it (no controls appeared):

I paused, again no controls:

The issue happens on Android API 30 and all lower APIs, from API 31+ it works fine...

It seems we need to inform Google (Issue Tracker, and other ways) ASAP, get their attention.

Because I can't find any info about it, like nobody really cares...

With Android 27 API and this library it doesn't even display the video:

Though other APIs display video but not controls, weird too...

[anonym24]

For everyone seeing this, please inform Google about the issue. Here’s some proof:

YouTube Player on Android API 27:
https://github.com/user-attachments/assets/543c8f5d-16ca-4122-8b79-0175c7487d39

YouTube Player on Android API 30:
https://github.com/user-attachments/assets/0a476250-8d4e-4814-b974-ccde3c539394

youtube-html.zip

[PierfrancescoSoffritti]

I wonder if this has to do with the way the player is sized in the webpage. But you might be right and it could just be a bug in the player itself.

[anonym24]

I tried different width/height and 100% as well, so it doesn't matter :)

Everyone who wants this fixed, please upvote the following issue:

https://issuetracker.google.com/issues/438639509

[dachev]

For what it's worth, I see this behavior on my emulator (API 29), but only in the initial stages while youtube is loading. Then, it resizes itself to fit perfectly.

[anonym24]

@dachev can you provide a screen video recording? I don't notice any changes, still players controls are not visible, only playback is visible