Wsrtjtyk

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

1.)

https://jsfiddle.net/byw5szgt/200/

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.) Doing just this doesn't work:

https://jsfiddle.net/byw5szgt/201/

  playerVars: {

    autoplay: 1,

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 do it.

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

            }

        });

    };

}());

el passed in enableAutoplay is

<div class="wrapg hide"><!---//--></div>

You need to modify src attribute for the child iframe in div.wrapg.

Querying div.wrapg for the iframe and making the modification can be accomplished like so:

const enableAutoplay = (el) => {

  const widget = el.querySelector("#widget2")

  widget.src = widget.src.replace("autoplay=0", "autoplay=1");

};