embedding multiple Youtube livestream and manage display with buttons

I am trying to setup a website page where 2 permanent live streams (from 2 different channels) are embedded. 2 buttons are present on the page, allowing the user to display 1 video or the other.

However I can't manage to make this work. I am now trying with regular youtube embed, but only one is displaying, the buttons don't have any effect. Also the autoplay doesn't seem to work...

I already tried the Livestream part, this works well, but not with 2 livestreams. Any advice where to look into. Thank you !

function showcam(num) {
  for (let i = 1; i < 2; i++) {
    document.getElementById("camera" + i).style.display = 'none';
  }
  document.getElementById("camera" + num).style.display = '';
  console.log(num)
}

iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
  max-width: 100%;
  z-index: -5;
}

<div id="cameramenu">

  <ul>
    <button id=button1 onclick="showcam(1)">
             <li> camera 1 </li>
           </button>
    <br>
    <button id=button1 onclick="showcam(2)">
             <li> camera 2 </li>
           </button>
</div>

<div id=cameravideo>
  <div id=camera1>
    <iframe id=camera1 title="Live-stream of the machine" src="https://www.youtube.com/embed/hgZqTIOzOp4?autoplay=1&modestbranding=1&color=red&showinfo=1" playsinline>
           </iframe>
  </div>

  <div id=camera2>
    <iframe id=camera2 title="Live-stream of the crowd" src="https://www.youtube.com/embed/CA5-UT_6Cxs?autoplay=1&modestbranding=1&color=red&showinfo=1" playsinline>
           </iframe>
  </div>

</div>

Solution

You have to use the iframe api in order to be able to control the video. From there, you'll be able to add more than 1 video and do make your own play buttons or toggle between them. If you need further help, I can try and give you an example that toggles between 2 videos.

https://developers.google.com/youtube/iframe_api_reference

https://jsfiddle.net/842u0f6v/

<!DOCTYPE html>
<html>
  <body>
    <!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
    <div id="player"></div>

    <script>
      // 2. This code loads the IFrame Player API code asynchronously.
      var tag = document.createElement('script');

      tag.src = "https://www.youtube.com/iframe_api";
      var firstScriptTag = document.getElementsByTagName('script')[0];
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

      // 3. This function creates an <iframe> (and YouTube player)
      //    after the API code downloads.
      var player;
      function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
          height: '390',
          width: '640',
          videoId: 'M7lc1UVf-VE',
          events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
          }
        });
      }

      // 4. The API will call this function when the video player is ready.
      function onPlayerReady(event) {
        event.target.playVideo();
      }

      // 5. The API calls this function when the player's state changes.
      //    The function indicates that when playing a video (state=1),
      //    the player should play for six seconds and then stop.
      var done = false;
      function onPlayerStateChange(event) {
        if (event.data == YT.PlayerState.PLAYING && !done) {
          setTimeout(stopVideo, 6000);
          done = true;
        }
      }
      function stopVideo() {
        player.stopVideo();
      }
    </script>
  </body>
</html>