SOLVED: Trying to get autoplay to work after the image is clicked

[asasass]

I want to open this up for other people who might have suggestions on how to do this.

Right now it doesn’t autoplay after it’s clicked:

1.)

Edit fiddle - JSFiddle - Code Playground

This piece here is supposed to work with:

      const enableAutoplay = (el) => el.src.replace("autoplay=0", "autoplay=1");
      const autoplay = (el) => el.setAttribute("src", enableAutoplay(el));

This:

     window.onYouTubePlayerAPIReady = function() {
              const video = document.querySelector(".video");
              const videoId = video.getAttribute("data-id");
              state.player = new YT.Player(video, {
                          width: 606,
                          height: 344,
                          videoId: videoId,
                          playerVars: {
                              autoplay: 0,

I don’t know how I would get them to work.

2.) Setting it up like this doesn’t work:

Edit fiddle - JSFiddle - Code Playground

      playerVars: {
        autoplay: 1,

(function iife() {
    "use strict";
    const show = (el) => el.classList.remove("hide");
    const hide = (el) => el.classList.add("hide");

    function coverClickHandler(evt) {
        const cover = evt.currentTarget;
        const wrapper = cover.parentNode.querySelector(".wrapg");
        hide(cover);
        show(wrapper); // video
    }
    const cover = document.querySelector(".jacketc");
    cover.addEventListener("click", coverClickHandler);
}());

Inside firefox, or Chrome, outside of jsfiddle, you can clearly see there that it
autoplays before the image is clicked. It starts playing behind the image.

Which is why the code would need to work with how it is set up in 1.),
but I can’t seem to figure out how I would get it to work. or it would be done some other way.

Edit fiddle - JSFiddle - Code Playground

html

<div class="video" data-id="M7lc1UVf-VE"></div>

This is the full javascript code:

  (function iife() {
        "use strict";
        const show = (el) => el.classList.remove("hide");
        const hide = (el) => el.classList.add("hide");
        const enableAutoplay = (el) => el.src.replace("autoplay=0", "autoplay=1");
        const autoplay = (el) => el.setAttribute("src", enableAutoplay(el));
    
        function coverClickHandler(evt) {
            const cover = evt.currentTarget;
            const wrapper = cover.parentNode.querySelector(".wrapg");
            hide(cover);
            show(wrapper);
            autoplay(wrapper);
        }
        const cover = document.querySelector(".jacketc");
        cover.addEventListener("click", coverClickHandler);
    }());
    (function videoPlayer() {
        "use strict";
    
        function onPlayerReady(evt) {
            const player = evt.target;
            player.setVolume(50); // percent
        }
        const tag = document.createElement("script");
        tag.src = "https://www.youtube.com/player_api";
        const firstScriptTag = document.getElementsByTagName("script")[0];
        firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
        
        window.onYouTubePlayerAPIReady = function() {
            const video = document.querySelector(".video");
            const videoId = video.getAttribute("data-id");
            new YT.Player(video, {
                width: 606,
                height: 344,
                videoId: videoId,
                playerVars: {
                    autoplay: 0,
                    controls: 1,
                    showinfo: 1,
                    rel: 0,
                    iv_load_policy: 3,
                    cc_load_policy: 0,
                    fs: 0,
                    disablekb: 1
                },
                events: {
                    "onReady": onPlayerReady
                }
            });
        };
    }());

[asasass]

For anyone who wants to know how this was resolved:

It should be this:
That’s all that needed to be adjusted:

Edit fiddle - JSFiddle - Code Playground

function coverClickHandler(evt) {
    const cover = evt.currentTarget;
    const wrapper = cover.parentNode.querySelector(".wrapg");
    const video = document.querySelector(".video");
    hide(cover);
    show(wrapper);
    autoplay(video);
  }

Not this:

Edit fiddle - JSFiddle - Code Playground

  function coverClickHandler(evt) {
    const cover = evt.currentTarget;
    const wrapper = cover.parentNode.querySelector(".wrapg");
    hide(cover);
    show(wrapper);
    autoplay(wrapper);
  }