1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Trying to get autoplay to work after the image is clicked

Discussion in 'JavaScript' started by javascriptcoding5678, Nov 12, 2018.

  1. #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));
    Code (JavaScript):
    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,
    Code (JavaScript):
    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,
    Code (JavaScript):

    (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);
    }());
    Code (JavaScript):
    ```

    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>
    HTML:
    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
      }
      });
      };
      }());
    Code (JavaScript):

    SEMrush
     
    javascriptcoding5678, Nov 12, 2018 IP
    SEMrush