bug(Youtube player): 100% width

[javatlacati]

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

16.2.12

Description

For mobile devices sometimes we'd like to make the YouTube video 100% of the width.

In order to achieve that in previous versions I did as follows:

<div #demoYouTubePlayer id="demoYouTubePlayer" class="demo-youtube-player">
            <youtube-player
                    [videoId]="song?.video?.id"
                    suggestedQuality="highres"
                    [height]="250"
                    style="width:100%"
                    [startSeconds]="song?.video?.start||0">
            </youtube-player>
    </div>

yet now it's not working.

Reproduction

StackBlitz link: https://stackblitz.com/edit/components-issue-k5bgl5?file=src%2Findex.html
Steps to reproduce:

1. update from 16.2.12 to 17.1.1

Expected Behavior

It shoult take the whole width of the screen

Actual Behavior

style doesn't affect the result probably now it's embedded in an extra tag

Environment

• Angular: 17.1.0
• CDK/Material: NO
• Browser(s): Edge 120.0.2210.144
• Operating System: Windows 11 Pro

[crisbeto]

This wasn't really officially supported before either since YouTube needs to know the width of the video. You can get it back like this: https://stackblitz.com/edit/components-issue-pkftug?file=src%2Fapp%2Fexample-component.html,src%2Fapp%2Fexample-component.css

[BojanKogoj]

This broke our websites as well, since we used this

<youtube-player
  width="100%"
  height="100%"
  ... />

A similar fix to the one you provided helped, but I just wish this was mentioned in changelog as a potential breaking change (even though it technically isn't one).

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}