I'm trying to get the 'player_api' script to work with a single player

There’s no .init(); being used in the code.

As a handy shortcut, you can place the text insertion bar on the opening curly brace of the function, and it will receive an underline. The matching closing curly brace of the function will also show an underline. That helps you to find the end of the function, which is what you are being asked about.

1 Like

That’s also another problem, yes.

https://jsfiddle.net/hzyrfkwb/169/

 function addVideo(video) {
   
    const videoId = video.getAttribute("data-id");
  new YT.Player(video, {
      width: 606,
      height: 344,
      videoId: videoId,
      playerVars: {
        autoplay: 1,
        controls: 1,
        showinfo: 1,
        rel: 0,
        iv_load_policy: 3,
        cc_load_policy: 0,
        fs: 0,
        disablekb: 1,
        loop: true,
        start: 200,
        end: 204
      },
      events: {
        "onReady": onPlayerReady,
        "onStateChange": onPlayerStateChange
            }
        });
    }

    function init(opts) {
     addVideo(opts.video);
        
    }
    return {
        init
    };
}());
(function iife() {
  "use strict";
  const show = (el) => el.classList.remove("hide");

  function coverClickHandler(evt) {
    const wrapper = evt.currentTarget.nextElementSibling;
    show(wrapper);
    videoPlayer.init();
  }

  const cover = document.querySelector(".jacketc");
  cover.addEventListener("click", coverClickHandler);
}());

You haven’t said anything about what’s right or wrong with that.

There’s no opts being used in the code.

TypeError: opts is undefined

  function init(opts) {
     addVideo(opts.video, opts.playerVars || {});
        
    }

The multiple players code shows you how to do that.

TypeError: opts is undefined

It’s in the exact same spots as the multi player code.

Only 3 are used.

  function init(opts) {
     addVideo(opts.video, opts.playerVars || {});
        
    }

Yes, that’s because you are calling init with no arguments.

^^

It’s in the exact same spots as the multi player code.

Only 3 are used.

Multi player code:

I think that you are getting confused about things.

The cause of the problem is further down, where you use videoPlayer.init

Got it:


    videoPlayer.init({
            video: wrapper.querySelector(".video"),
        
        });
    }

I’ll demonstrate by using comments to indicate the changed/removed lines.

    videoPlayer.init({
            // video: wrapper.querySelector(".video"),
            video: wrapper.querySelector(".video")
            // playerVars: {
            //     start: 900,
            //     end: 1200
            // }
        });
1 Like

I can’t figure this out:

Expected an identifier and instead saw ‘}’.
});

       videoPlayer.init({
            video: wrapper.querySelector(".video"),
        });
    }

After the comma, the code expects something else.
It looks like you failed to remove the comma, as I demonstrated in the previous post.

1 Like

Fixed:

        videoPlayer.init({
            video: wrapper.querySelector(".video")
        });
    }
1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.