fix: wrong youtube iframe height

[jramke]

Related:

/

Description:

The iframe height was set to 1000% instead of 100% wich resulted in a cropped and pixelated preview image.

Ready?

yes

Anything Else?

/

Review Process:

/

[mihar-22]

The height is set on purpose to prevent YouTube branding from showing up. Use the poster component to address the pixelated issue as shown in the docs:

React:

<MediaPlayer>
  <MediaProvider>
    <Poster className="vds-poster" />
  </MediaProvider>
</MediaPlayer>

HTML:

<media-player>
  <media-provider>
    <media-poster class="vds-poster" />
  </media-provider>
</media-player>

[jramke]

Oh, well thanks for the hint.

Yep when setting a poster source the media-poster element is correctly created.
For my use case i will fetch the youtube video thumbnail as fallback then.

Maybe its worth to implement from vidstack by default
https://stackoverflow.com/questions/2068344/how-do-i-get-a-youtube-video-thumbnail-from-the-youtube-api

Best regards

[mihar-22]

No source is required when using the YouTube provider, the poster should work as expected. The above examples assume you're using the Default Theme and you've applied the vds-poster class.

[jramke]

Im using the normal js api so i can progressively enhance the browsers video element or in this case iframe.

When the player is created form the iframe the aspect ratio gets set to unset. And the element will be just 150px in height.
If the media-players aspect ratio is set to 16 / 9 via css with !important the preview image is pixelated and cropped.
Here is a repro link: https://stackblitz.com/edit/vitejs-vite-m2eptd?file=main.js

PS: i tried to include the web components element as reference but i somehow couldn't get it working.