search

vime-js / vime

Customizable, extensible, accessible and framework agnostic media player. Modern alternative to Video.js and Plyr. Supports HTML5, HLS, Dash, YouTube, Vimeo, Dailymotion...
https://vimejs.com
MIT License
2.77k stars 152 forks source link

bug: Youtube video size is too small #253

Open khacnhat opened 3 years ago

khacnhat commented 3 years ago

Bug Report

Vime version:

Vime version: 5.0.33 for Angular

Provider:

[] Audio [] Video [] HLS [] DASH [x] YouTube [] Vimeo [] Dailymotion

Current behavior:

The size of the video is too small. It's about 40px of height only.

Expected behavior:

The size should be bigger. For example the min-height is 500px. It's better if it supports responsiveness.

Steps to reproduce: I just use Vimeo as is instructed in the documentation: https://vimejs.com/components/providers/youtube

Screen Shot 2021-09-20 at 12 34 32

Related code:

<vm-player controls>
              <vm-youtube cookies="true" video-id="DyTCOwB0DVw"></vm-youtube>
            </vm-player>

Other information:

timdpaep commented 3 years ago

I have the same issue. It seems like the isVideoView property never switches over to 'true', therefore the inline padding-top:56.25% is not set. The height of 40px is the min-height of the .player class.

stolinski commented 2 years ago

I'm also having this same issue. Anyone have a quick fix or hack since .player is in the shadow root.

mihar-22 commented 2 years ago

Even though I've seen this issue before I can't repro right now strangely. Not seeing happen on the Vime demo page either.

RustemRiz commented 2 years ago

as a trick I use prop viewType=ViewType.Video for VimePlayer component (React example)

<VimePlayer ref={playerRef} viewType={ViewType.Video}>
  <Youtube videoId={id} />
  <DefaultUi />
</VimePlayer>