Hello!
I’m looking to use an embedded video as a background for a website. I’m somewhat of a first-time user so I spent a lot of time rummaging through the docs, and shopping-pasting code before giving up and arriving here in search of help.
Spec: a video background that auto-plays in loop, with no controls, no spinner loading, no fullscreen capabilities, and no click to play/pause. I managed to configure this, but am left with one issue: the video displays a black screen (I assume to load the video first) before playing.
While I am happy to do the hacky-javascript-solution of taking the first frame manually and rendering it in a div, before swapping it out for the video on event: “mediaReady”, I’m curious to know if there’s a setting I could use to do it for me, or at least make the black loading screen transparent.
Below is the configuration I have at the moment (unnecessary information obfuscated w/ an asterisk):
```kWidget.addReadyCallback((playerId) => {
const kdp = document.getElementById(playerId);
kdp.kBind('mediaReady', () => {
kdp.sendNotification('doPlay');
});
});
kWidget.embed({
targetId: 'myPlayer',
wid: '*',
uiconf_id: *,
flashvars: {
loop: true,
autoMute: true,
// autoPlay: true, // For some reason this doesn't work w/ controlBarContainer.plugin=false
'controlBarContainer.plugin': false,
'largePlayBtn.plugin': false,
'loadingSpinner.plugin': false,
},
cache_st: *,
entry_id: '*',
});```
For anyone interested, here is also the CSS:
```#myPlayer {
width: 100vw;
height: 56.25vw;
pointer-events: none;
position: fixed;
@media (max-aspect-ratio: 16/9) {
width: 177.8vh;
height: 100vh;
}
}```
Thanks!