Trying to get autoplay to work after the image is clicked

JavaScript
1

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.) Setting it up like this doesn’t work:
https://jsfiddle.net/byw5szgt/203/

      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.
https://jsfiddle.net/byw5szgt/200/

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
                }
            });
        };
    }());
2

Not sure if only by replacing the src has any effect at all. Maybe you could try to create the YT.Player after the image is clicked? Let me know, if it din’t work I’ll try to take a deeper look later.

1 Like
3

That’s the thing, I don’t know what I would be replacing the ‘src’ with.

This is a working version using iframe,
but I’m not using iframe in the html.
https://jsfiddle.net/byw5szgt/165/
<iframe class="js-player hide" src="https://www.youtube-nocookie.com/embed/M7lc1UVf-VE?rel=0&showinfo=0&autoplay=0&iv_load_policy=3&cc_load_policy=0&fs=0&disablekb=1&enablejsapi=1" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

I’m using this which is set up differently:
https://jsfiddle.net/byw5szgt/200/
<div class="video" data-id="M7lc1UVf-VE"></div>

And I don’t think adding something like this would be possible:
data-autoplay="0"

4

So I’ve taken a look and you actually have an error in your logic.

You’re replacing src from the wrapper when you should replace in the video itself.

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

Thank you so much for helping me figure this out.