I'm trying to add the graphics over the auto shuffle play version code

JavaScript
1

I’m trying to combine this code

The Graphics

<div class="wrapg">

  <div class="video" onclick="thevid=document.getElementById('thevideo');
thevid.style.display='block'; this.style.display='none';
document.getElementById('iframe').src =
document.getElementById('iframe').src.replace('autoplay=0','autoplay=1');">

    <svg class="play" width="600" height="338" viewbox="-3 -0.3 30 24.655">
<path fill="#FA33FC" d="M16.036 11.58l-6-3.82a.5.5 0 0 0-.77.42v7.64a.498.498 0 0 0 .77.419l6-3.817c.145-.092.23-.25.23-.422s-.085-.33-.23-.42z"></path>

<path fill="#FA33FC" d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z"></path></svg>

    <div class="lines"></div>
  </div>

  <div id="thevideo">

    <iframe id="iframe" class="playing" src="https://www.youtube-nocookie.com/embed/videoseries?list=PLlvHlI3rc2tM-_dUdn0-wXOcyyoVtEIjs&rel=0&showinfo=1&autoplay=0&iv_load_policy=3&cc_load_policy=0&fs=0&disablekb=1" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

  </div>
</div>

.wrapg {
  position: relative;
  width: 606px;
  height: 344px;
  margin-top: 8px;
  cursor: pointer;
  border: 3px solid #0059dd;
  box-sizing: border-box;
  background: url("https://i.imgur.com/AJDZEOX.jpg") no-repeat 0 0;
}

.wrapg .play {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  fill: #0059dd;
}

.wrapg .playing {
  position: absolute;
  top: -3px;
  left: -3px;
  width: 606px;
  height: 344px;
  border: 3px solid #FA33FC;
  box-sizing: border-box;
}

.wrapg .lines::before,
.wrapg .lines::after {
  content: "";
  position: absolute;
  top: 0;
  left: 198px;
  width: 3px;
  height: 100%;
  background: #0059dd;
}

.wrapg .lines::after {
  left: 399px;
}

.wrapg .video {
  width: 606px;
  display: block;
}

.wrapg #thevideo {
  display: none;
}

.wrapg #thevideo,
iframe {
  width: 600px;
  height: 338px;
}

With this code.

Random Shuffle Play Javascript

<div id="player"></div>
<script>
  var playlistId = "PLlvHlI3rc2tM-_dUdn0-wXOcyyoVtEIjs";
  var tag = document.createElement('script');
  tag.src = "https://www.youtube.com/iframe_api";

  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

  var player;

  function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
      height: '411',
      width: '548',
      playerVars: {
        autoplay: 1,
        loop: 0,
        controls: 1,
        showinfo: 1,
        autohide: 0,
        rel: 0,
        iv_load_policy: 3,
        cc_load_policy: 0,
        fs: 0,
        disablekb: 1,
      },
      events: {
        'onReady': onPlayerReady,
        'onStateChange': onPlayerStateChange
      }

    });
  }


  var playlistArray;
  var playListArrayLength;
  var maxNumber;

  var oldNumber = 0;
  var NewNumber = 0;

  function newRandomNumber() {
    oldNumber = NewNumber;
    NewNumber = Math.floor(Math.random() * maxNumber);
    if (NewNumber == oldNumber) {
      newRandomNumber();
    } else {
      return NewNumber;
    }
  }

  function onPlayerReady(event) {
    player.loadPlaylist({
      'listType': 'playlist',
      'list': playlistId
    });
  }

  var firstLoad = true;

  function onPlayerStateChange(event) {
    console.log(event.data);
    if (event.data == YT.PlayerState.ENDED) {
      player.playVideoAt(newRandomNumber());
    } else {
      if (firstLoad && event.data == YT.PlayerState.PLAYING) {
        firstLoad = false;
        playlistArray = player.getPlaylist();
        playListArrayLength = playlistArray.length;
        maxNumber = playListArrayLength;
        NewNumber = newRandomNumber();
        player.playVideoAt(newRandomNumber());
      }
    }
  }

</script>
2

In your attempt, what do you have so far? What issues are you experiencing when you try?

3

I think I need to be figuring these out.

3 id’s

id="thevideo"
id="iframe"

id="player"

2 classes

class="playing"

class="video"
4

I almost got it here. Still figuring it out.

<div class="wrapg">

  <div class="video" onclick="thevid=document.getElementById('thevideo');
thevid.style.display='block'; this.style.display='none';
document.getElementById('iframe').src =
document.getElementById('iframe').src.replace('autoplay=0','autoplay=1');">

    <svg class="play" width="600" height="338" viewbox="-3 -0.3 30 24.655">
<path fill="#FA33FC" d="M16.036 11.58l-6-3.82a.5.5 0 0 0-.77.42v7.64a.498.498 0 0 0 .77.419l6-3.817c.145-.092.23-.25.23-.422s-.085-.33-.23-.42z"></path>

<path fill="#FA33FC" d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z"></path></svg>

    <div class="lines"></div>
  </div>

  <div id="thevideo">

    id="iframe" class="playing"




    <div id="player"></div>
    
    
    <script>
      var playlistId = "PLlvHlI3rc2tM-_dUdn0-wXOcyyoVtEIjs";
      var tag = document.createElement('script');
      tag.src = "https://www.youtube.com/iframe_api";

      var firstScriptTag = document.getElementsByTagName('script')[0];
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

      var player;

      function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
          height: '606',
          width: '344',
          playerVars: {
            autoplay: 1,
            loop: 0,
            controls: 1,
            showinfo: 1,
            autohide: 0,
            rel: 0,
            iv_load_policy: 3,
            cc_load_policy: 0,
            fs: 0,
            disablekb: 1,
          },
          events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
          }

        });
      }


      var playlistArray;
      var playListArrayLength;
      var maxNumber;

      var oldNumber = 0;
      var NewNumber = 0;

      function newRandomNumber() {
        oldNumber = NewNumber;
        NewNumber = Math.floor(Math.random() * maxNumber);
        if (NewNumber == oldNumber) {
          newRandomNumber();
        } else {
          return NewNumber;
        }
      }

      function onPlayerReady(event) {
        player.loadPlaylist({
          'listType': 'playlist',
          'list': playlistId
        });
      }

      var firstLoad = true;

      function onPlayerStateChange(event) {
        console.log(event.data);
        if (event.data == YT.PlayerState.ENDED) {
          player.playVideoAt(newRandomNumber());
        } else {
          if (firstLoad && event.data == YT.PlayerState.PLAYING) {
            firstLoad = false;
            playlistArray = player.getPlaylist();
            playListArrayLength = playlistArray.length;
            maxNumber = playListArrayLength;
            NewNumber = newRandomNumber();
            player.playVideoAt(newRandomNumber());
          }
        }
      }

    </script>

  </div>
</div>
5

Almost there I think.
audio should be off behind the image.

Like how it works here:

Got up this far.

<div id="player" id="iframe" class="playing"></div>

I’m not sure if you’re allowed to do this.

 </script>

  </div>
</div>
6

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