Converting javascript to work with YouTube Audio Only

I have this set up with 9 audio streams.

class="song1" class="song2" class="song3" class="song4" class="song5" class="song6" class="song7" class="song8"
class="song9"

How would I be able to convert the javascript for it to be able to use YouTube as just audio, without the video?

I would want 9 of these in the code, not just 1 because I would want to edit the PlayVars on each of them. Which is how it’s shown in the jsfiddle example.

    player = new YT.Player('youtube-player', {
      height: '0',
      width: '0',
      videoId: ctrlq4.dataset.video,
      playerVars: {
        autoplay: ctrlq4.dataset.autoplay,
        loop: ctrlq4.dataset.loop,
      },
      events: {

I Would want it using the load player thing also.
https://jsfiddle.net/Lw90a3ev/20/

Like how this is set up.Where it doesn’t load until you click on it.

const videoPlayer = (function makeVideoPlayer() {
  "use strict";

  function loadPlayer() {
    const tag = document.createElement("script");
    tag.src = "https://www.youtube.com/player_api";
    const firstScriptTag = document.getElementsByTagName("script")[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
  }

  function onPlayerReady(event) {
    const youtubePlayer = event.target;
    youtubePlayer.setVolume(50); // percent
  }
  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: 1,
        controls: 1,
        showinfo: 1,
        rel: 0,
        iv_load_policy: 3,
        cc_load_policy: 0,
        fs: 0,
        disablekb: 1
      },
      events: {
        "onReady": onPlayerReady
      }
    });
  };

  function init() {
    loadPlayer();
  }
  return {
    init
  };

}());


(function iife() {
  "use strict";
  const show = (el) => el.classList.remove("hide");

  function coverClickHandler(evt) {
    const wrapper = evt.currentTarget.nextElementSibling;
    show(wrapper);
    videoPlayer.init();
  }

  const cover = document.querySelector(".jacketc");
  cover.addEventListener("click", coverClickHandler);
}());

YouTube Audio Only Code:

Working example I found using multiple players:
https://jsfiddle.net/8wkjqf3m/

Maybe there’s a better way to do the javascript part.

html:


<!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
<div style="display:flex;justify-content:center;align-items:center;">
    <div style="width:400px;height:300px;">
        <div data-video="JC08Fu3QfJg" data-autoplay="0" data-loop="1" id="youtube-audio1"></div>
        <div data-video="7_WWz2DSnT8" data-autoplay="0" data-loop="1" id="youtube-audio2"></div>
        <div data-video="t3217H8JppI" data-autoplay="0" data-loop="1" id="youtube-audio3"></div>
        <div data-video="cbZ7V2ifh20" data-autoplay="0" data-loop="1" id="youtube-audio4"></div>
        <div style="clear:both;margin:10px;text-align:center">
            <p>The audio player is created with the YouTube API.</p>
            <p>Read Tutorial: <a href="http://www.labnol.org/internet/youtube-audio-player/26740/">YouTube Audio Player</a></p>
        </div>
    </div>
</div>

Javascript:


// 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 player1, player2, player3, player4;
  function onYouTubeIframeAPIReady() {

    var ctrlq1 = document.getElementById("youtube-audio1");
    ctrlq1.innerHTML = '<img id="youtube-icon1" src=""/><div id="youtube-player1"></div>';
    ctrlq1.style.cssText = 'width:150px;margin:2em auto;cursor:pointer;cursor:hand;display:none';
    ctrlq1.onclick = toggleAudio1;

    player1 = new YT.Player('youtube-player1', {
      height: '0',
      width: '0',
      videoId: ctrlq1.dataset.video,
      playerVars: {
        autoplay: ctrlq1.dataset.autoplay,
        loop: ctrlq1.dataset.loop,
      },
      events: {
        'onReady': onPlayerReady1,
        'onStateChange': onPlayerStateChange1 
      } 
    });

    var ctrlq2 = document.getElementById("youtube-audio2");
    ctrlq2.innerHTML = '<img id="youtube-icon2" src=""/><div id="youtube-player2"></div>';
    ctrlq2.style.cssText = 'width:150px;margin:2em auto;cursor:pointer;cursor:hand;display:none';
    ctrlq2.onclick = toggleAudio2;

    player2 = new YT.Player('youtube-player2', {
      height: '0',
      width: '0',
      videoId: ctrlq2.dataset.video,
      playerVars: {
        autoplay: ctrlq2.dataset.autoplay,
        loop: ctrlq2.dataset.loop,
      },
      events: {
        'onReady': onPlayerReady2,
        'onStateChange': onPlayerStateChange2
      } 
    });

    var ctrlq3 = document.getElementById("youtube-audio3");
    ctrlq3.innerHTML = '<img id="youtube-icon3" src=""/><div id="youtube-player3"></div>';
    ctrlq3.style.cssText = 'width:150px;margin:2em auto;cursor:pointer;cursor:hand;display:none';
    ctrlq3.onclick = toggleAudio3;

    player3 = new YT.Player('youtube-player3', {
      height: '0',
      width: '0',
      videoId: ctrlq3.dataset.video,
      playerVars: {
        autoplay: ctrlq3.dataset.autoplay,
        loop: ctrlq3.dataset.loop,
      },
      events: {
        'onReady': onPlayerReady3,
        'onStateChange': onPlayerStateChange3 
      } 
    });

    var ctrlq4 = document.getElementById("youtube-audio4");
    ctrlq4.innerHTML = '<img id="youtube-icon4" src=""/><div id="youtube-player4"></div>';
    ctrlq4.style.cssText = 'width:150px;margin:2em auto;cursor:pointer;cursor:hand;display:none';
    ctrlq4.onclick = toggleAudio4;

    player4 = new YT.Player('youtube-player4', {
      height: '0',
      width: '0',
      videoId: ctrlq4.dataset.video,
      playerVars: {
        autoplay: ctrlq4.dataset.autoplay,
        loop: ctrlq4.dataset.loop,
      },
      events: {
        'onReady': onPlayerReady4,
        'onStateChange': onPlayerStateChange4 
      } 
    });
  } 

  function togglePlayButton1(play) {    
    document.getElementById("youtube-icon1").src = play ? "https://i.imgur.com/IDzX9gL.png" : "https://i.imgur.com/quyUPXN.png";
  }

  function toggleAudio1() {
    if ( player1.getPlayerState() == 1 || player1.getPlayerState() == 3 ) {
      player1.pauseVideo(); 
      togglePlayButton1(false);
    } else {
      player1.playVideo(); 
      togglePlayButton1(true);
    } 
  } 

  function togglePlayButton2(play) {    
    document.getElementById("youtube-icon2").src = play ? "https://i.imgur.com/IDzX9gL.png" : "https://i.imgur.com/quyUPXN.png";
  }

  function toggleAudio2() {
    if ( player2.getPlayerState() == 1 || player2.getPlayerState() == 3 ) {
      player2.pauseVideo(); 
      togglePlayButton2(false);
    } else {
      player2.playVideo(); 
      togglePlayButton2(true);
    } 
  } 

  function togglePlayButton3(play) {    
    document.getElementById("youtube-icon3").src = play ? "https://i.imgur.com/IDzX9gL.png" : "https://i.imgur.com/quyUPXN.png";
  }

  function toggleAudio3() {
    if ( player3.getPlayerState() == 1 || player3.getPlayerState() == 3 ) {
      player3.pauseVideo(); 
      togglePlayButton3(false);
    } else {
      player3.playVideo(); 
      togglePlayButton3(true);
    } 
  } 

  function togglePlayButton4(play) {    
    document.getElementById("youtube-icon4").src = play ? "https://i.imgur.com/IDzX9gL.png" : "https://i.imgur.com/quyUPXN.png";
  }

  function toggleAudio4() {
    if ( player4.getPlayerState() == 1 || player4.getPlayerState() == 3 ) {
      player4.pauseVideo(); 
      togglePlayButton4(false);
    } else {
      player4.playVideo(); 
      togglePlayButton4(true);
    } 
  } 

  function onPlayerReady1(event) {
    player1.setPlaybackQuality("small");
    document.getElementById("youtube-audio1").style.display = "block";
    togglePlayButton1(player1.getPlayerState() !== 5);
  }

  function onPlayerStateChange1(event) {
    if (event.data === 0) {
      togglePlayButton1(false); 
    }
  }

  function onPlayerReady2(event) {
    player2.setPlaybackQuality("small");
    document.getElementById("youtube-audio2").style.display = "block";
    togglePlayButton2(player2.getPlayerState() !== 5);
  }

  function onPlayerStateChange2(event) {
    if (event.data === 0) {
      togglePlayButton2(false); 
    }
  }

  function onPlayerReady3(event) {
    player3.setPlaybackQuality("small");
    document.getElementById("youtube-audio3").style.display = "block";
    togglePlayButton3(player3.getPlayerState() !== 5);
  }

  function onPlayerStateChange3(event) {
    if (event.data === 0) {
      togglePlayButton3(false); 
    }
  }

  function onPlayerReady4(event) {
    player4.setPlaybackQuality("small");
    document.getElementById("youtube-audio4").style.display = "block";
    togglePlayButton4(player4.getPlayerState() !== 5);
  }

  function onPlayerStateChange4(event) {
    if (event.data === 0) {
      togglePlayButton4(false); 
    }
  }

YouTube doesn’t do just audio, video comes along as a part of it.

As their terms & conditions state:

Separating the audio and video would be breaching their own terms and conditions, which they will not do.

2 Likes

Thanks, that’s what I had read somewhere else too, I wasn’t sure though.

Would I be able to set it up in a way where the YouTube is hidden / invincible behind the image?
Where the play / pause buttons would work?

Would that be something that is doable?

I could add opacity to the iframe which hides it:
opacity:0;

iframe {
  position: absolute;
  top: 0;
  left: 0px;
  width: 198px;
  height: 198px;
  cursor: pointer;
  opacity:0;
}

Isn’t that something that that already happens?

YouTube isn’t implemented in this code:

These are radio streams.

This is YouTube:

Added opacity:0;

iframe {
  position: absolute;
  top: 0;
  left: 0px;
  width: 198px;
  height: 198px;
  cursor: pointer;
  opacity:0;
}

I would need to get it working right when it’s visible before transferring it to the other code with the play pause buttons.

I got up this far with this:

Play / Pause buttons

How would I add in the YouTube javascript to work with the code?

YouTube javascript

How would I convert this to be able to be used with the YouTube javascript code?

I would need to attach each play / pause button to a video.

<div class="wrapc">

  <div class="playButton video playinga song1" data-id="M7lc1UVf-VE">
    <svg class="stack" width="198" height="198" viewbox="0 0 198 198" aria-hidden="true">
    <circle  cx="100" cy="99" r="40.88334" ></circle>
  </svg>

    <svg class="play " width="28.6667" height="35.4" viewbox="0 0 1226 1481">
           <title>Play</title>
    <path d="M0 1394V87C0 46.3 13.3 19.8 40 7.5 66.7-4.8 98.7.3 136 23l1034 634c37.3 22.7 56 50.3 56 83s-18.7 60.3-56 83L136 1458c-37.3 22.7-69.3 27.8-96 15.5-26.7-12.3-40-38.8-40-79.5z">
    </path>
  </svg>

    <svg class="pause hide" width="28.6667" height="35.4" viewbox="0 0 1260 1512">
           <title>Pause</title>
    <path d="M252 0H126C91.3 0 61.7 12.3 37 37 12.3 61.7 0 91.3 0 126v1260c0 34.7 12.3 64.3 37 89 24.7 24.7 54.3 37 89 37h126c34.7 0 64.3-12.3 89-37 24.7-24.7 37-54.3 37-89V126c0-34.7-12.3-64.3-37-89-24.7-24.7-54.3-37-89-37zm882 0h-126c-34.7 0-64.3 12.3-89 37-24.7 24.7-37 54.3-37 89v1260c0 34.7 12.3 64.3 37 89 24.7 24.7 54.3 37 89 37h126c34.7 0 64.3-12.3 89-37 24.7-24.7 37-54.3 37-89V126c0-34.7-12.3-64.3-37-89-24.7-24.7-54.3-37-89-37z">
    </path>
  </svg>
  </div>


<div class="playButton video playingb song2" data-id="M7lc1UVf-VE">
    <svg class="stack" width="198" height="198" viewbox="0 0 198 198" aria-hidden="true">
    <circle  cx="100" cy="99" r="40.88334" ></circle>
  </svg>

    <svg class="play" width="28.6667" height="35.4" viewbox="0 0 1226 1481">
           <title>Play</title>
    <path d="M0 1394V87C0 46.3 13.3 19.8 40 7.5 66.7-4.8 98.7.3 136 23l1034 634c37.3 22.7 56 50.3 56 83s-18.7 60.3-56 83L136 1458c-37.3 22.7-69.3 27.8-96 15.5-26.7-12.3-40-38.8-40-79.5z">
    </path>
  </svg>

    <svg class="pause hide" width="28.6667" height="35.4" viewbox="0 0 1260 1512">
           <title>Pause</title>
    <path d="M252 0H126C91.3 0 61.7 12.3 37 37 12.3 61.7 0 91.3 0 126v1260c0 34.7 12.3 64.3 37 89 24.7 24.7 54.3 37 89 37h126c34.7 0 64.3-12.3 89-37 24.7-24.7 37-54.3 37-89V126c0-34.7-12.3-64.3-37-89-24.7-24.7-54.3-37-89-37zm882 0h-126c-34.7 0-64.3 12.3-89 37-24.7 24.7-37 54.3-37 89v1260c0 34.7 12.3 64.3 37 89 24.7 24.7 54.3 37 89 37h126c34.7 0 64.3-12.3 89-37 24.7-24.7 37-54.3 37-89V126c0-34.7-12.3-64.3-37-89-24.7-24.7-54.3-37-89-37z">
    </path>
  </svg>
  </div>


<div class="playButton video playingc song3" data-id="M7lc1UVf-VE">
    <svg class="stack" width="198" height="198" viewbox="0 0 198 198" aria-hidden="true">
    <circle  cx="100" cy="99" r="40.88334" ></circle>
  </svg>

    <svg class="play" width="28.6667" height="35.4" viewbox="0 0 1226 1481">
           <title>Play</title>
    <path d="M0 1394V87C0 46.3 13.3 19.8 40 7.5 66.7-4.8 98.7.3 136 23l1034 634c37.3 22.7 56 50.3 56 83s-18.7 60.3-56 83L136 1458c-37.3 22.7-69.3 27.8-96 15.5-26.7-12.3-40-38.8-40-79.5z">
    </path>
  </svg>

    <svg class="pause hide" width="28.6667" height="35.4" viewbox="0 0 1260 1512">
           <title>Pause</title>
    <path d="M252 0H126C91.3 0 61.7 12.3 37 37 12.3 61.7 0 91.3 0 126v1260c0 34.7 12.3 64.3 37 89 24.7 24.7 54.3 37 89 37h126c34.7 0 64.3-12.3 89-37 24.7-24.7 37-54.3 37-89V126c0-34.7-12.3-64.3-37-89-24.7-24.7-54.3-37-89-37zm882 0h-126c-34.7 0-64.3 12.3-89 37-24.7 24.7-37 54.3-37 89v1260c0 34.7 12.3 64.3 37 89 24.7 24.7 54.3 37 89 37h126c34.7 0 64.3-12.3 89-37 24.7-24.7 37-54.3 37-89V126c0-34.7-12.3-64.3-37-89-24.7-24.7-54.3-37-89-37z">
    </path>
  </svg>
  </div>



 <div class="playButton video playingd song4" data-id="M7lc1UVf-VE">
    <svg class="stack" width="198" height="198" viewbox="0 0 198 198" aria-hidden="true">
    <circle  cx="100" cy="99" r="40.88334" ></circle>
  </svg>

    <svg class="play" width="28.6667" height="35.4" viewbox="0 0 1226 1481">
           <title>Play</title>
    <path d="M0 1394V87C0 46.3 13.3 19.8 40 7.5 66.7-4.8 98.7.3 136 23l1034 634c37.3 22.7 56 50.3 56 83s-18.7 60.3-56 83L136 1458c-37.3 22.7-69.3 27.8-96 15.5-26.7-12.3-40-38.8-40-79.5z">
    </path>
  </svg>

    <svg class="pause hide" width="28.6667" height="35.4" viewbox="0 0 1260 1512">
           <title>Pause</title>
    <path d="M252 0H126C91.3 0 61.7 12.3 37 37 12.3 61.7 0 91.3 0 126v1260c0 34.7 12.3 64.3 37 89 24.7 24.7 54.3 37 89 37h126c34.7 0 64.3-12.3 89-37 24.7-24.7 37-54.3 37-89V126c0-34.7-12.3-64.3-37-89-24.7-24.7-54.3-37-89-37zm882 0h-126c-34.7 0-64.3 12.3-89 37-24.7 24.7-37 54.3-37 89v1260c0 34.7 12.3 64.3 37 89 24.7 24.7 54.3 37 89 37h126c34.7 0 64.3-12.3 89-37 24.7-24.7 37-54.3 37-89V126c0-34.7-12.3-64.3-37-89-24.7-24.7-54.3-37-89-37z">
    </path>
  </svg>
  </div>

 <div class="playButton video playinge song5" data-id="M7lc1UVf-VE">
    <svg class="stack" width="198" height="198" viewbox="0 0 198 198" aria-hidden="true">
    <circle  cx="100" cy="99" r="40.88334" ></circle>
  </svg>

    <svg class="play" width="28.6667" height="35.4" viewbox="0 0 1226 1481">
           <title>Play</title>
    <path d="M0 1394V87C0 46.3 13.3 19.8 40 7.5 66.7-4.8 98.7.3 136 23l1034 634c37.3 22.7 56 50.3 56 83s-18.7 60.3-56 83L136 1458c-37.3 22.7-69.3 27.8-96 15.5-26.7-12.3-40-38.8-40-79.5z">
    </path>
  </svg>

    <svg class="pause hide" width="28.6667" height="35.4" viewbox="0 0 1260 1512">
           <title>Pause</title>
    <path d="M252 0H126C91.3 0 61.7 12.3 37 37 12.3 61.7 0 91.3 0 126v1260c0 34.7 12.3 64.3 37 89 24.7 24.7 54.3 37 89 37h126c34.7 0 64.3-12.3 89-37 24.7-24.7 37-54.3 37-89V126c0-34.7-12.3-64.3-37-89-24.7-24.7-54.3-37-89-37zm882 0h-126c-34.7 0-64.3 12.3-89 37-24.7 24.7-37 54.3-37 89v1260c0 34.7 12.3 64.3 37 89 24.7 24.7 54.3 37 89 37h126c34.7 0 64.3-12.3 89-37 24.7-24.7 37-54.3 37-89V126c0-34.7-12.3-64.3-37-89-24.7-24.7-54.3-37-89-37z">
    </path>
  </svg>
  </div>


 <div class="playButton video playingf song6" data-id="M7lc1UVf-VE">
    <svg class="stack" width="198" height="198" viewbox="0 0 198 198" aria-hidden="true">
    <circle  cx="100" cy="99" r="40.88334" ></circle>
  </svg>

    <svg class="play" width="28.6667" height="35.4" viewbox="0 0 1226 1481">
           <title>Play</title>
    <path d="M0 1394V87C0 46.3 13.3 19.8 40 7.5 66.7-4.8 98.7.3 136 23l1034 634c37.3 22.7 56 50.3 56 83s-18.7 60.3-56 83L136 1458c-37.3 22.7-69.3 27.8-96 15.5-26.7-12.3-40-38.8-40-79.5z">
    </path>
  </svg>

    <svg class="pause hide" width="28.6667" height="35.4" viewbox="0 0 1260 1512">
           <title>Pause</title>
    <path d="M252 0H126C91.3 0 61.7 12.3 37 37 12.3 61.7 0 91.3 0 126v1260c0 34.7 12.3 64.3 37 89 24.7 24.7 54.3 37 89 37h126c34.7 0 64.3-12.3 89-37 24.7-24.7 37-54.3 37-89V126c0-34.7-12.3-64.3-37-89-24.7-24.7-54.3-37-89-37zm882 0h-126c-34.7 0-64.3 12.3-89 37-24.7 24.7-37 54.3-37 89v1260c0 34.7 12.3 64.3 37 89 24.7 24.7 54.3 37 89 37h126c34.7 0 64.3-12.3 89-37 24.7-24.7 37-54.3 37-89V126c0-34.7-12.3-64.3-37-89-24.7-24.7-54.3-37-89-37z">
    </path>
  </svg>
  </div>


 <div class="playButton video playingg song7" data-id="M7lc1UVf-VE">
    <svg class="stack" width="198" height="198" viewbox="0 0 198 198" aria-hidden="true">
    <circle  cx="100" cy="99" r="40.88334" ></circle>
  </svg>

    <svg class="play" width="28.6667" height="35.4" viewbox="0 0 1226 1481">
           <title>Play</title>
    <path d="M0 1394V87C0 46.3 13.3 19.8 40 7.5 66.7-4.8 98.7.3 136 23l1034 634c37.3 22.7 56 50.3 56 83s-18.7 60.3-56 83L136 1458c-37.3 22.7-69.3 27.8-96 15.5-26.7-12.3-40-38.8-40-79.5z">
    </path>
  </svg>

    <svg class="pause hide" width="28.6667" height="35.4" viewbox="0 0 1260 1512">
           <title>Pause</title>
    <path d="M252 0H126C91.3 0 61.7 12.3 37 37 12.3 61.7 0 91.3 0 126v1260c0 34.7 12.3 64.3 37 89 24.7 24.7 54.3 37 89 37h126c34.7 0 64.3-12.3 89-37 24.7-24.7 37-54.3 37-89V126c0-34.7-12.3-64.3-37-89-24.7-24.7-54.3-37-89-37zm882 0h-126c-34.7 0-64.3 12.3-89 37-24.7 24.7-37 54.3-37 89v1260c0 34.7 12.3 64.3 37 89 24.7 24.7 54.3 37 89 37h126c34.7 0 64.3-12.3 89-37 24.7-24.7 37-54.3 37-89V126c0-34.7-12.3-64.3-37-89-24.7-24.7-54.3-37-89-37z">
    </path>
  </svg>
  </div>


   <div class="playButton video playingh song8" data-id="M7lc1UVf-VE">
    <svg class="stack" width="198" height="198" viewbox="0 0 198 198" aria-hidden="true">
    <circle  cx="100" cy="99" r="40.88334" ></circle>
  </svg>

    <svg class="play" width="28.6667" height="35.4" viewbox="0 0 1226 1481">
           <title>Play</title>
    <path d="M0 1394V87C0 46.3 13.3 19.8 40 7.5 66.7-4.8 98.7.3 136 23l1034 634c37.3 22.7 56 50.3 56 83s-18.7 60.3-56 83L136 1458c-37.3 22.7-69.3 27.8-96 15.5-26.7-12.3-40-38.8-40-79.5z">
    </path>
  </svg>

    <svg class="pause hide" width="28.6667" height="35.4" viewbox="0 0 1260 1512">
           <title>Pause</title>
    <path d="M252 0H126C91.3 0 61.7 12.3 37 37 12.3 61.7 0 91.3 0 126v1260c0 34.7 12.3 64.3 37 89 24.7 24.7 54.3 37 89 37h126c34.7 0 64.3-12.3 89-37 24.7-24.7 37-54.3 37-89V126c0-34.7-12.3-64.3-37-89-24.7-24.7-54.3-37-89-37zm882 0h-126c-34.7 0-64.3 12.3-89 37-24.7 24.7-37 54.3-37 89v1260c0 34.7 12.3 64.3 37 89 24.7 24.7 54.3 37 89 37h126c34.7 0 64.3-12.3 89-37 24.7-24.7 37-54.3 37-89V126c0-34.7-12.3-64.3-37-89-24.7-24.7-54.3-37-89-37z">
    </path>
  </svg>
  </div>


 <div class="playButton video playingi song9" data-id="M7lc1UVf-VE">
    <svg class="stack" width="198" height="198" viewbox="0 0 198 198" aria-hidden="true">
    <circle  cx="100" cy="99" r="40.88334" ></circle>
  </svg>

    <svg class="play" width="28.6667" height="35.4" viewbox="0 0 1226 1481">
           <title>Play</title>
    <path d="M0 1394V87C0 46.3 13.3 19.8 40 7.5 66.7-4.8 98.7.3 136 23l1034 634c37.3 22.7 56 50.3 56 83s-18.7 60.3-56 83L136 1458c-37.3 22.7-69.3 27.8-96 15.5-26.7-12.3-40-38.8-40-79.5z">
    </path>
  </svg>

    <svg class="pause hide" width="28.6667" height="35.4" viewbox="0 0 1260 1512">
           <title>Pause</title>
    <path d="M252 0H126C91.3 0 61.7 12.3 37 37 12.3 61.7 0 91.3 0 126v1260c0 34.7 12.3 64.3 37 89 24.7 24.7 54.3 37 89 37h126c34.7 0 64.3-12.3 89-37 24.7-24.7 37-54.3 37-89V126c0-34.7-12.3-64.3-37-89-24.7-24.7-54.3-37-89-37zm882 0h-126c-34.7 0-64.3 12.3-89 37-24.7 24.7-37 54.3-37 89v1260c0 34.7 12.3 64.3 37 89 24.7 24.7 54.3 37 89 37h126c34.7 0 64.3-12.3 89-37 24.7-24.7 37-54.3 37-89V126c0-34.7-12.3-64.3-37-89-24.7-24.7-54.3-37-89-37z">
    </path>
  </svg>
  </div>

  (function iife() {
    "use strict";
    const show = (el) => el.classList.remove("hide");
    const hide = (el) => el.classList.add("hide");

    function getButtonContainer(el) {
      while (el.classList.contains("playButton") === false) {
        el = el.parentNode;
      }
      return el;
    }

    function hideAllButtons(button) {
      button.querySelectorAll(".play, .pause, .speaker").forEach(hide);
    }

    function getPlay(button) {
      return button.querySelector(".play");
    }

    function getPause(button) {
      return button.querySelector(".pause");
    }

    function showPlayButton(button) {
      const play = getPlay(button);
      hideAllButtons(button);
      show(play);
      button.classList.remove("active");
    }

    function isPlaying(button) {
      const play = getPlay(button);
      return play.classList.contains("hide");
    }

    function pauseAllButtons() {
      const buttons = document.querySelectorAll(".playButton");
      buttons.forEach(function hidePause(button) {
        if (isPlaying(button)) {
          showPlayButton(button);
        }
      });
    }

    function showPauseButton(button) {
      const pause = getPause(button);
      pauseAllButtons();
      hideAllButtons(button);
      show(pause);
    }

    function getAudio() {
      return document.querySelector("audio");
    }

    function playAudio(player, src) {
      player.volume = 1.0;
      if (player.getAttribute("src") !== src) {
        player.setAttribute("src", src);
      }
      player.play();
    }

    function showButton(button, opts) {
      if (opts.playing) {
        showPlayButton(button);
      } else {
        showPauseButton(button);
      }
    }

    function pauseAudio(player) {
      player.pause();
    }

    function manageAudio(player, opts) {
      if (opts.playing) {
        pauseAudio(player);
      } else {
        playAudio(player, opts.src);
      }
    }

    function playButton(button) {
      const player = getAudio();
      const playing = isPlaying(button);
      showButton(button, {
        playing
      });
      manageAudio(player, {
        src: button.getAttribute("data-audio"),
        playing
      });
    }

    function playButtonClickHandler(evt) {
      const button = getButtonContainer(evt.target);
      playButton(button);
    }

    function initButton(selector) {
      const wrapper = document.querySelector(selector);
      wrapper.addEventListener("click", playButtonClickHandler);
    }
    initButton(".wrapc");
  }());

YouTube Javascript:


const videoPlayer = (function makeVideoPlayer() {
  "use strict";

  function loadPlayer() {
    const tag = document.createElement("script");
    tag.src = "https://www.youtube.com/player_api";
    const firstScriptTag = document.getElementsByTagName("script")[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
  }

  function onPlayerReady(event) {
    const player = event.target;
    player.setVolume(50); // percent
  }

  function addVideo(video) {
    const videoId = video.getAttribute("data-id");
    new YT.Player(video, {
      width: 200,
      height: 200,
      videoId: videoId,
        playerVars: {
        autoplay: 1,
        controls: 1,
        showinfo: 1,
        rel: 0,
        iv_load_policy: 3,
        cc_load_policy: 0,
        fs: 0,
        disablekb: 1
      },
      events: {
        "onReady": onPlayerReady
      }
    });
  }
  let apiIsReady = false;
  let timer;
  window.onYouTubePlayerAPIReady = function() {
    apiIsReady = true;
  }

  function init(video) {
    loadPlayer();
    timer = setInterval(function checkAPIReady() {
      if (apiIsReady) {
        timer = clearInterval(timer);
        addVideo(video);
      }
    }, 100);
  }
  return {
    init
  };
}());
(function iife() {
  "use strict";
  const show = (el) => el.classList.remove("hide");

  function coverClickHandler(evt) {
    const wrapper = evt.currentTarget.nextElementSibling;
    show(wrapper);
    videoPlayer.init(wrapper.querySelector(".video"));
  }

  const cover = document.querySelector(".playa");
  cover.addEventListener("click", coverClickHandler);
}());

(function iife() {
  "use strict";
  const show = (el) => el.classList.remove("hide");


  function coverClickHandler(evt) {
    const wrapper = evt.currentTarget.nextElementSibling;
    show(wrapper);
    videoPlayer.init(wrapper.querySelector(".video"));
  }
  const cover = document.querySelector(".playb");
  cover.addEventListener("click", coverClickHandler);
}());

(function iife() {
  "use strict";
  const show = (el) => el.classList.remove("hide");


  function coverClickHandler(evt) {
    const wrapper = evt.currentTarget.nextElementSibling;
    show(wrapper);
    videoPlayer.init(wrapper.querySelector(".video"));
  }
  const cover = document.querySelector(".playc");
  cover.addEventListener("click", coverClickHandler);
}());

(function iife() {
  "use strict";
  const show = (el) => el.classList.remove("hide");


  function coverClickHandler(evt) {
    const wrapper = evt.currentTarget.nextElementSibling;
    show(wrapper);
    videoPlayer.init(wrapper.querySelector(".video"));
  }
  const cover = document.querySelector(".playd");
  cover.addEventListener("click", coverClickHandler);
}());

(function iife() {
  "use strict";
  const show = (el) => el.classList.remove("hide");

  function coverClickHandler(evt) {
    const wrapper = evt.currentTarget.nextElementSibling;
    show(wrapper);
    videoPlayer.init(wrapper.querySelector(".video"));
  }
  const cover = document.querySelector(".playe");
  cover.addEventListener("click", coverClickHandler);
}());

(function iife() {
  "use strict";
  const show = (el) => el.classList.remove("hide");

  function coverClickHandler(evt) {
    const wrapper = evt.currentTarget.nextElementSibling;
    show(wrapper);
    videoPlayer.init(wrapper.querySelector(".video"));
  }

  const cover = document.querySelector(".playf");
  cover.addEventListener("click", coverClickHandler);
}());

(function iife() {
  "use strict";
  const show = (el) => el.classList.remove("hide");


  function coverClickHandler(evt) {
    const wrapper = evt.currentTarget.nextElementSibling;
    show(wrapper);
    videoPlayer.init(wrapper.querySelector(".video"));
  }
  const cover = document.querySelector(".playg");
  cover.addEventListener("click", coverClickHandler);
}());

(function iife() {
  "use strict";
  const show = (el) => el.classList.remove("hide");

  function coverClickHandler(evt) {
    const wrapper = evt.currentTarget.nextElementSibling;
    show(wrapper);
    videoPlayer.init(wrapper.querySelector(".video"));
  }
  const cover = document.querySelector(".playh");
  cover.addEventListener("click", coverClickHandler);
}());

(function iife() {
  "use strict";
  const show = (el) => el.classList.remove("hide");


  function coverClickHandler(evt) {
    const wrapper = evt.currentTarget.nextElementSibling;
    show(wrapper);
    videoPlayer.init(wrapper.querySelector(".video"));
  }
  const cover = document.querySelector(".playi");
  cover.addEventListener("click", coverClickHandler);
}());

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