Optimal looping-autoplay-video-background using embed


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', () => {
    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;


Hello @wallace,

I’d actually recommend that you use player v3 for this.
You can see an example here: https://developer.kaltura.com/

The embed code for it is here: https://github.com/kaltura/developer-platform/blob/9134ff5ef8d27455435d9392cae1ab8ba9f47ee3/homepage/views/welcome.pug

If you’re using CE, you may first need to enable the v3 studio from Admin Console->Publishers->Your partner->Actions->Configure->Show V3 Studio
Following that, you will see the TV PLATFORM tab under KMC->Studio

The reason it is muted (without having to specify it in the embed code, is that it’s already set as the default behaviour on the UI conf object, like so:

	config	{
	"disableUserCache": false,
	"player": {
		"plugins": {},
		"playback": {
			"preload": "auto",
			"autoplay": true,
			"muted": true
	"provider": {
		"env": {}

You can either do the same or explicitly add "muted": true to the embed code.

Thank you for the speedy reply. Of course, newer technology! I would happily use it, but will need circle back to higher-ups to ask for permission. I will try to provide an update if we’re able to get it to work (or have additional questions), if you do not hear from me, please assume they’ve vetoed my request.

Thanks nonetheless!

Update: so it looks like I might some more clarification for using the v3 player.

I’m in the rare scenario of being the person who receives the script tag that includes the bootstrapping for the Kaltura code, but does not quite have access to configure the the videos via the manager itself. Admittedly, I haven’t ever even seen the UI that does that.

With that in mind, I did forward your instructions to the department that handles that, but if it’s not too much trouble, I wondering if you also could direct us to any beginner-friendly documentation/article about using/setting up the v3-player-ready-videos from the manager.