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.75k stars 154 forks source link

vm-scrim only covers half of the video #361

Open mdg583 opened 1 year ago

mdg583 commented 1 year ago

For some reason the vm-scrim control only covers the right half of the video.

If I inspect the html element, adding "left:0" style to the div with class "scrim gradient gradientUp" in the element fixes the issue. But I'm unable to apply the style through the web-page css styles.

The problem exists for me on Firefox, Chrome and Edge on Windows. I assume the issue may be related to some other css style on my page?

My player is loaded like this:

<vm-player #player>
      <vm-youtube cookies="true" video-id="VIDEOID"></vm-youtube>
      <vm-default-ui no-controls>
      <vm-default-controls
        hide-on-mouse-leave
        active-duration="2000"
      ></vm-default-controls>
      </vm-default-ui>
    </vm-player>
mdg583 commented 1 year ago

The problem seems to be present when the vm-player element has inherited the text-align:center style. Adding a style rule that sets text-align:left seems to fix it.