iamrobert/playr-v2.html

## playr-v2.html
(function(){

		//PRECONNECT TO YOUTUBE
		var linkTag = document.createElement('link');
		linkTag.rel = 'preconnect';
		linkTag.href = 'https://img.youtube.com';
	//inject tag in the head of the document
		document.head.appendChild(linkTag);


	var players = [];

  let YouTubeContainers = document.querySelectorAll(".js-player");


  // Iterate over every YouTube container you may have
  for (var i = 0; i < YouTubeContainers.length; i++) {
    let container = YouTubeContainers[i];
    let imageSource = "https://img.youtube.com/vi_webp/"+ container.dataset.plyrEmbedId +"/hqdefault.webp";
		var ytUrl = "https://www.youtube.com/watch?v="+ container.dataset.plyrEmbedId +"";
//		var imageTitle = "";
//
//
//


    // Load the Thumbnail Image asynchronously
    let image = new Image();


			fetch("https://noembed.com/embed?dataType=json&url=" + ytUrl)
  .then(function (res) {
    return res.json();
  })
  .then(function (data) {
    return image.alt = data.title;
  });
//		var imageTitle = data.title;
//		console.log(imageTitle);
	//	image.loading = "lazy";
    image.src = imageSource;
		//image.alt = "Youtube";
		image.width = '480';
    image.height = '360';
//		image.loading = 'lazy';
    image.addEventListener("load", function() {
      container.appendChild(image);
    });

    // When the user clicks on the container, load the embedded YouTube video
    container.addEventListener("click", function() {


				var plyr = container.getAttribute('data-plyr-embed-id');
//
				var plyr = '.js-player[data-plyr-embed-id='+plyr+']';


				var player = new Plyr(plyr, {

				youtube: {
          //SEE YOUTUBE API: https://developers.google.com/youtube/player_parameters#Parameters
          //  origin: window.location.host,
          //origin: 'https://t20.test/22-video-player.html',
          origin: window.location.host,
          iv_load_policy: 3,
          modestbranding: 1,
          playsinline: 1,
          showinfo: 0,
          rel: 0,
          enablejsapi: 1,
          noCookie: true,
        },


			});


			  player.on('ready', () => {
    player.play();
  })

		// Attach Play Event
    player.on("play", function () {
      players.forEach(function (playerElement) {
        if (playerElement !== player && playerElement.playing) {
          playerElement.pause();
        }
      });
    });


		// Save Player Instance
    players.push(player);


		// STOP Other Players
    players.forEach(function (player) {
      player.on("play", function () {
        player.elements.container.classList.add("player-expand");
        players.forEach(function (otherPlayer) {
          if (otherPlayer !== player && otherPlayer.playing) {
            otherPlayer.pause();
          }
        });
        /**
         * Pause when opening Lightbox
         */

        var lightboxLinks = document.querySelectorAll("[class^='glightbox']");

        for (var i = 0; i < lightboxLinks.length; i++) {
          lightboxLinks[i].addEventListener("click", function () {
            player.pause();
          });
        } // player.toggleControls('progress');
      });
      player.on("pause", function () {
        if (!player.seeking) {
          player.elements.container.classList.remove("player-expand");
        }
      });
    });


   });
  }
})();

## plyr.html

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
	lite-youtube {
		border: 5px solid red;
		margin-bottom: 20px;
	}

	.plyr {
		border: 5px solid blue;
		margin-bottom: 20px;
	}
	.container {
		max-width: 600px;
		margin: 60px auto;
		width: 100%;
		font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
	}

  .player-container{position: relative; width: fit-content;}
  .player-container .play-button{
    width: 40px;
    height: 40px;
    border-radius: 999px;
    background-color: blue;
    border: 1px solid blue;
    color: white;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .d-none{display: none;}
  .plyr{
    width:560px !important; height:315px !important;
  }
	</style>
	<link href="plyr.css" rel="stylesheet" >
	<link href="glightbox.css" rel="stylesheet" >
</head>

<body>

<div id="main-container">
  <div class="player-container" id="container_1">
    <img src="preview.png" alt="">
    <button
      data-id="1"
      data-link="https://www.youtube.com/embed/bTqVqk7FSmY"
      class="play-button">Play
    </button>
    <div class="plyr__video-embed js-player d-none" id="js_player_1">
      <iframe allowfullscreen loading="lazy"></iframe>
    </div>
  </div>

  <div class="player-container" id="container_2">
    <img src="preview.png" alt="">
    <button
      data-id="2"
      data-link="https://www.youtube-nocookie.com/embed/Ga6RYejo6Hk"
      class="play-button">Play
    </button>
    <div class="plyr__video-embed js-player d-none" id="js_player_2">
      <iframe allowfullscreen loading="lazy"></iframe>
    </div>
  </div>
</div>


<!--
		<article class="container">
		<h2  style="color: blue;">GLIGHTBOX</h2>
		<p><a href="https://biati-digital.github.io/glightbox/" target="_blank">https://biati-digital.github.io/glightbox/</a></p>

		  <a href="https://www.youtube-nocookie.com/embed/Ga6RYejo6Hk" class="glightbox3">
                                        Click for video
                                    </a>

	</article>
-->


	<script src="plyr.js"></script>
<!--	<script src="glightbox.js"></script>-->


	<script>

var players = [];

let playButton = document.querySelectorAll(".play-button");
playButton.forEach(element => {
  element.addEventListener('click', function(e){
    let fakePoster = this.parentElement.children[0];
    let fakeButton = this.parentElement.children[1];
    let orgPlyr    = this.parentElement.children[2];
    let iframe     = this.parentElement.children[2].children[0];
    // Remove
    fakePoster.remove();
    fakeButton.remove();
    orgPlyr.classList.remove('d-none');
    // get player Data
    let containerID = this.dataset.id;
    let link = this.dataset.link;
    iframe.src = link;
    let playerID = 'js_player_'+containerID;
    let plyr = document.getElementById(playerID);
    // Init Player
    let player = new Plyr( plyr ,{
        youtube: {
          origin: window.location.host,
          iv_load_policy: 3,
          modestbranding: 1,
          playsinline: 1,
          showinfo: 0,
          rel: 0,
          enablejsapi: 1,
          noCookie: true,
        },
      });
    // Attach Play Event
    player.on('play', function(){
      players.forEach(playerElement => {
        if (playerElement !== player && playerElement.playing) {
          playerElement.pause();
        }
      });
    });
    // Save Player Instance
    players.push(player);
    // STOP Other Players
    players.forEach(function (player) {
      player.on("play", function () {
        player.elements.container.classList.add("player-expand");
        players.forEach(function (otherPlayer) {
          if (otherPlayer !== player && otherPlayer.playing) {
            otherPlayer.pause();
          }
        });

        /**
         * Pause when opening Lightbox
         */
        var lightboxLinks = document.querySelectorAll("[class^='glightbox']");

        for (var i = 0; i < lightboxLinks.length; i++) {
          lightboxLinks[i].addEventListener("click", function () {
            player.pause();
          });
        } // player.toggleControls('progress');
      });
      player.on("pause", function () {
        if (!player.seeking) {
          player.elements.container.classList.remove("player-expand");
        }
      });
    });

  });
});

let isEventCalled = false;
let i =0;

var observer = new IntersectionObserver(function(entries) {
	// isIntersecting is true when element and viewport are overlapping
	// isIntersecting is false when element and viewport don't overlap
	if(entries[0].isIntersecting === true)
    if(!isEventCalled){
      var myVar = setInterval(function(){
        i++;
        let button = document.querySelectorAll('button[data-id="'+i+'"]');
        console.log(button);
        if(button.length!=0)
          button[0].dispatchEvent(new Event("click"));
        if(button.length==0)
          clearInterval(myVar);
      },1000);
      isEventCalled=true;
    }
}, { threshold: [0] });

observer.observe(document.querySelector("#main-container"));

	   var lightboxVideo = GLightbox({
                selector: '.glightbox3'
            });
	</script>
</body>
</html>
	(function(){

	//PRECONNECT TO YOUTUBE
	var linkTag = document.createElement('link');
	linkTag.rel = 'preconnect';
	linkTag.href = 'https://img.youtube.com';
	//inject tag in the head of the document
	document.head.appendChild(linkTag);




	var players = [];

	let YouTubeContainers = document.querySelectorAll(".js-player");



	// Iterate over every YouTube container you may have
	for (var i = 0; i < YouTubeContainers.length; i++) {
	let container = YouTubeContainers[i];
	let imageSource = "https://img.youtube.com/vi_webp/"+ container.dataset.plyrEmbedId +"/hqdefault.webp";
	var ytUrl = "https://www.youtube.com/watch?v="+ container.dataset.plyrEmbedId +"";
	// var imageTitle = "";
	//
	//
	//


	// Load the Thumbnail Image asynchronously
	let image = new Image();


	fetch("https://noembed.com/embed?dataType=json&url=" + ytUrl)
	.then(function (res) {
	return res.json();
	})
	.then(function (data) {
	return image.alt = data.title;
	});
	// var imageTitle = data.title;
	// console.log(imageTitle);
	// image.loading = "lazy";
	image.src = imageSource;
	//image.alt = "Youtube";
	image.width = '480';
	image.height = '360';
	// image.loading = 'lazy';
	image.addEventListener("load", function() {
	container.appendChild(image);
	});

	// When the user clicks on the container, load the embedded YouTube video
	container.addEventListener("click", function() {



	var plyr = container.getAttribute('data-plyr-embed-id');
	//
	var plyr = '.js-player[data-plyr-embed-id='+plyr+']';


	var player = new Plyr(plyr, {

	youtube: {
	//SEE YOUTUBE API: https://developers.google.com/youtube/player_parameters#Parameters
	// origin: window.location.host,
	//origin: 'https://t20.test/22-video-player.html',
	origin: window.location.host,
	iv_load_policy: 3,
	modestbranding: 1,
	playsinline: 1,
	showinfo: 0,
	rel: 0,
	enablejsapi: 1,
	noCookie: true,
	},


	});


	player.on('ready', () => {
	player.play();
	})

	// Attach Play Event
	player.on("play", function () {
	players.forEach(function (playerElement) {
	if (playerElement !== player && playerElement.playing) {
	playerElement.pause();
	}
	});
	});


	// Save Player Instance
	players.push(player);


	// STOP Other Players
	players.forEach(function (player) {
	player.on("play", function () {
	player.elements.container.classList.add("player-expand");
	players.forEach(function (otherPlayer) {
	if (otherPlayer !== player && otherPlayer.playing) {
	otherPlayer.pause();
	}
	});
	/**
	* Pause when opening Lightbox
	*/

	var lightboxLinks = document.querySelectorAll("[class^='glightbox']");

	for (var i = 0; i < lightboxLinks.length; i++) {
	lightboxLinks[i].addEventListener("click", function () {
	player.pause();
	});
	} // player.toggleControls('progress');
	});
	player.on("pause", function () {
	if (!player.seeking) {
	player.elements.container.classList.remove("player-expand");
	}
	});
	});



	});
	}
	})();

	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>Untitled Document</title>
	<style>
	lite-youtube {
	border: 5px solid red;
	margin-bottom: 20px;
	}

	.plyr {
	border: 5px solid blue;
	margin-bottom: 20px;
	}
	.container {
	max-width: 600px;
	margin: 60px auto;
	width: 100%;
	font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
	}

	.player-container{position: relative; width: fit-content;}
	.player-container .play-button{
	width: 40px;
	height: 40px;
	border-radius: 999px;
	background-color: blue;
	border: 1px solid blue;
	color: white;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	}
	.d-none{display: none;}
	.plyr{
	width:560px !important; height:315px !important;
	}
	</style>
	<link href="plyr.css" rel="stylesheet" >
	<link href="glightbox.css" rel="stylesheet" >
	</head>

	<body>

	<div id="main-container">
	<div class="player-container" id="container_1">
	<img src="preview.png" alt="">
	<button
	data-id="1"
	data-link="https://www.youtube.com/embed/bTqVqk7FSmY"
	class="play-button">Play
	</button>
	<div class="plyr__video-embed js-player d-none" id="js_player_1">
	<iframe allowfullscreen loading="lazy"></iframe>
	</div>
	</div>

	<div class="player-container" id="container_2">
	<img src="preview.png" alt="">
	<button
	data-id="2"
	data-link="https://www.youtube-nocookie.com/embed/Ga6RYejo6Hk"
	class="play-button">Play
	</button>
	<div class="plyr__video-embed js-player d-none" id="js_player_2">
	<iframe allowfullscreen loading="lazy"></iframe>
	</div>
	</div>
	</div>


	<!--
	<article class="container">
	<h2 style="color: blue;">GLIGHTBOX</h2>
	<p><a href="https://biati-digital.github.io/glightbox/" target="_blank">https://biati-digital.github.io/glightbox/</a></p>

	<a href="https://www.youtube-nocookie.com/embed/Ga6RYejo6Hk" class="glightbox3">
	Click for video
	</a>

	</article>
	-->


	<script src="plyr.js"></script>
	<!-- <script src="glightbox.js"></script>-->


	<script>

	var players = [];

	let playButton = document.querySelectorAll(".play-button");
	playButton.forEach(element => {
	element.addEventListener('click', function(e){
	let fakePoster = this.parentElement.children[0];
	let fakeButton = this.parentElement.children[1];
	let orgPlyr = this.parentElement.children[2];
	let iframe = this.parentElement.children[2].children[0];
	// Remove
	fakePoster.remove();
	fakeButton.remove();
	orgPlyr.classList.remove('d-none');
	// get player Data
	let containerID = this.dataset.id;
	let link = this.dataset.link;
	iframe.src = link;
	let playerID = 'js_player_'+containerID;
	let plyr = document.getElementById(playerID);
	// Init Player
	let player = new Plyr( plyr ,{
	youtube: {
	origin: window.location.host,
	iv_load_policy: 3,
	modestbranding: 1,
	playsinline: 1,
	showinfo: 0,
	rel: 0,
	enablejsapi: 1,
	noCookie: true,
	},
	});
	// Attach Play Event
	player.on('play', function(){
	players.forEach(playerElement => {
	if (playerElement !== player && playerElement.playing) {
	playerElement.pause();
	}
	});
	});
	// Save Player Instance
	players.push(player);
	// STOP Other Players
	players.forEach(function (player) {
	player.on("play", function () {
	player.elements.container.classList.add("player-expand");
	players.forEach(function (otherPlayer) {
	if (otherPlayer !== player && otherPlayer.playing) {
	otherPlayer.pause();
	}
	});

	/**
	* Pause when opening Lightbox
	*/
	var lightboxLinks = document.querySelectorAll("[class^='glightbox']");

	for (var i = 0; i < lightboxLinks.length; i++) {
	lightboxLinks[i].addEventListener("click", function () {
	player.pause();
	});
	} // player.toggleControls('progress');
	});
	player.on("pause", function () {
	if (!player.seeking) {
	player.elements.container.classList.remove("player-expand");
	}
	});
	});

	});
	});

	let isEventCalled = false;
	let i =0;

	var observer = new IntersectionObserver(function(entries) {
	// isIntersecting is true when element and viewport are overlapping
	// isIntersecting is false when element and viewport don't overlap
	if(entries[0].isIntersecting === true)
	if(!isEventCalled){
	var myVar = setInterval(function(){
	i++;
	let button = document.querySelectorAll('button[data-id="'+i+'"]');
	console.log(button);
	if(button.length!=0)
	button[0].dispatchEvent(new Event("click"));
	if(button.length==0)
	clearInterval(myVar);
	},1000);
	isEventCalled=true;
	}
	}, { threshold: [0] });

	observer.observe(document.querySelector("#main-container"));

	var lightboxVideo = GLightbox({
	selector: '.glightbox3'
	});
	</script>
	</body>
	</html>