1

I am testing an app through vizio smartcast, and it uses the hls player. The browser uses hls player and works fine with my CSS in browser, but on device (vizio tv) its almost as if it doesn't respect some CSS attributes ( like absolute positioning) or see its parent div.. Does Vizio only support inline CSS? Are there any docs I can read about what they support with CSS? Is my CSS wrong?

<div style="position: relative; width: 300px; height: 100px;">
    <video
        style="object-fit: cover;
        position: absolute;
        bottom: 0;
        left: 0;
        height: 100%;
        width: 100%;"
        id="video-player"
        muted={isMuted}
        bind:currentTime
        bind:this={videoElement}
        bind:duration
        bind:paused
        bind:ended
    />
</div>

this shows a white or cut off screen

lache
  • 608
  • 2
  • 12
  • 29
  • Not a fix but note that the [ – Rob Feb 03 '23 at 15:03
  • this might be a framework thing you can use self closing tags – lache Feb 03 '23 at 15:53
  • Svelte compiles the code which also allows something like `
    ` without breaking everything.     – H.B. Feb 03 '23 at 17:03
  • @Rob: It's not, the spec you linked to states: "Tag omission in text/html: Neither tag is omissible.". Otherwise you would not be able to e.g. add subtitle `` elements inside it. As I said, if an element has to be closed, adding the slash will *make Svelte do it for you*. – H.B. Feb 04 '23 at 18:36
  • @H.B. Whoops! Yep. You're right. – Rob Feb 04 '23 at 21:00

1 Answers1

0

Since the RDK aampplayer is an interface, I first use videoelemnt.getBoundingClientRect() to get the dimensions of the div, then I have to pass in those dimensions to aamplayer.setRect(x,y,width,height...) which "tells" the player the right dimensions. seems redundant but I use it in afterUpdate() lifecycle so anytime the div dimensions change, it sets it correctly. css has almost no effect on aamplayer dimensions in my experience.

lache
  • 608
  • 2
  • 12
  • 29