I am integrating the official YouTube IFrame Player API into a responsive web/PWA chat application.
Each participant has an independent YouTube IFrame player on their own device. My application does not download, cache, restream, or modify YouTube video content.
The main player is displayed at a normal 16:9 size. When the user navigates from a chat room to the application's home screen, the same player becomes a visible, movable 16:9 floating player.
The current responsive CSS is similar to:
.floating-youtube-player {
width: min(62vw, 250px);
aspect-ratio: 16 / 9;
}
On common mobile screens, the resulting size is approximately:
360px viewport: 223 x 126px
390px viewport: 242 x 136px
430px viewport: 250 x 141px
The floating player always remains visible in the foreground. YouTube branding, advertisements, and the native player controls are not intentionally hidden or modified. If the user closes the floating player, playback is paused.
The YouTube Embedded Player documentation states:
Embedded players must have a viewport that is at least 200px by 200px.
However, the YouTube Help page about ads on embedded videos describes 200 x 200px or larger as a recommendation.
My questions are:
Does the minimum viewport requirement mean that both the width and height must each be at least 200px, including on mobile devices?
For a 16:9 player, does this effectively require a minimum size of approximately 356 x 200px?
Is a visible floating player such as 250 x 141px allowed if YouTube branding and native controls remain usable and unobscured?
Does the requirement refer to the CSS size of the iframe or to the visible video area inside the player?
Relevant documentation:
https://developers.google.com/youtube/player_parameters
https://support.google.com/youtube/answer/132596
I would appreciate clarification specifically for a responsive, visible floating player in a mobile web/PWA application.