bug(Youtube player): width not responsive

### Is this a regression?

- [X] Yes, this behavior used to work in the previous version

### The previous version in which this bug was not present was

I only noticed it after a couple of upgrades, so I don't know exactly.

### Description

Related: https://github.com/angular/components/issues/28489
However the workarounds that are mentioned there don't work anymore.

Setting `width="100%"` does not work as the input is transformed into a number type:
https://github.com/angular/components/blob/main/src/youtube-player/youtube-player.ts#L148

What is the solution approach to get the component to display responsively so it shows up correctly on both mobile and desktop?

### Reproduction

StackBlitz link: https://stackblitz.com/edit/angular-youtube-player-responsive-issue?file=src%2Fmain.ts
Steps to reproduce:
1. Open the StackBlitz link
2. Optionally make the preview window smaller.
3. Check the browser preview to confirm that the video is overflowing the page width.

### Expected Behavior

It shoult take the whole width of the screen

### Actual Behavior

The video overflows the with of its parent elements.

### Environment

- Angular: 17.0.1
- Browser(s): Stackblitz bundled
- Operating System (e.g. Windows, macOS, Ubuntu): online

Start with src/youtube-player/youtube-player.ts around line 148 and reproduce the overflow using the linked StackBlitz example. Read the related issue 28489, then verify the component uses a responsive width that fits its parent in both the smaller preview and desktop-sized view.

Written by the indexing model from the issue text.