We Keep Coding

how to auto play multiple videos tag in one page html with opening modal

I have an HTML page that should display two different videos in two different modals.
I want the video to start playing automatically whenever the play-video icon is clicked and the modal is opened.I did this with this code(video.forEach(video => video.play());) but both videos start playing.
And when the modal is open and the video is playing, the video is cut and the modal is closed by the user clicking on the window or modal-closed screen.I did this with this code:( video.forEach(video => video.pause());).
I just have to do this with JavaScript
Thank you in advance for your cooperation.
// modal and video
var modal = document.getElementsByClassName("modal");
var playVideo = document.getElementsByClassName("play-video");
var modalClose = document.getElementsByClassName("modal--close");
var video = document.querySelectorAll('video');
function setDataIndex() {
for (i = 0; i < playVideo.length; i++){
playVideo[i].setAttribute('data-index', i);
modal[i].setAttribute('data-index', i);
modalClose[i].setAttribute('data-index', i);
video.forEach(video => video.play());
}
}
for (i = 0; i < playVideo.length; i++){
playVideo[i].onclick = function() {
var ElementIndex = this.getAttribute('data-index');
modal[ElementIndex].style.display = "block";
};
modalClose[i].onclick = function() {
var ElementIndex = this.getAttribute('data-index');
modal[ElementIndex].style.display = "none";
video.forEach(video => video.pause());
};
}
window.onload = function() {
setDataIndex();
};
window.onclick = function(event) {
if (event.target === modal[event.target.getAttribute('data-index')]) {
modal[event.target.getAttribute('data-index')].style.display = "none";
video.forEach(video => video.pause());
}
};
// modal and video
:root{
/* colors */
--cws: #121214; /*color name: Woodsmoke RGB: 18, 18, 20 */
--clo: #2A827c; /*color name: Lochinvar RGB: 42, 130, 124 */
--cpr: #3CBBB0; /*color name: Puerto Rico RGB: 60, 187, 176 */
--cwa: #7C809B; /*color name: Waterloo RGB: 124, 128, 155 */
--csp: #F5EDF0; /*color name: Soft Peach RGB: 245, 237, 240 */
--cwh: #FFFFFF; /*color name: White RGB: 255, 255, 255 */
}
.play-video{
width: 20px;
height: 20px;
border-radius: 50%;
background-color: green;
}
/* modal */
.modal{
display: none;
position: fixed;
z-index:13;
left: 0;
top: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
overflow-y: hidden;
background: rgba(124, 128, 155,.8);
}
.modal.active{
display: flex;
align-items: center;
justify-content: center;
}
.modal--content {
margin: auto;
width: 50%;
height: auto;
border-radius: 20px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
-ms-border-radius: 20px;
-o-border-radius: 20px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
}
.modal--header{
text-align: right;
position: absolute;
top: 20px;
right: 30px;
}
.modal--close{
color: var(--cws);
font-size: 3rem;
transition: all .5s;
-webkit-transition: all .5s;
-moz-transition: all .5s;
-ms-transition: all .5s;
-o-transition: all .5s;
}
.modal--close:hover,
.modal--close:focus {
color: var(--csp);
cursor: pointer;
}
.modal--body{
width: 100%;
height: 100%;
}
.modal--body video{
width: 100%;
height: 100%;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
border: 15px solid var(--csp);
}
/* modal */
<!-- icon play -->
<div class="play-video"></div>
<div class="play-video"></div>
<!-- icon play -->
<!-- The Modal -->
<div class="modal">
<div class="modal--header">
<span class="modal--close">×</span>
</div>
<div class="modal--content">
<div class="modal--body">
<video controls class="inlineVideo" autoplay="autoplay">
<source src="https://www.youtube.com/watch?v=sgNkCrAhTGc" >
</video>
</div>
</div>
</div>
<!-- The Modal -->
<!-- The Modal -->
<div class="modal">
<div class="modal--header">
<span class="modal--close">×</span>
</div>
<div class="modal--content">
<div class="modal--body">
<video controls class="inlineVideo" autoplay="autoplay">
<source src="https://www.youtube.com/watch?v=YZ0cJiVr2-w" >
</video>
</div>
</div>
</div>
<!-- The Modal -->

// modal and video
var modal = document.getElementsByClassName("modal");
var playVideo = document.getElementsByClassName("play-video");
var modalClose = document.getElementsByClassName("modal--close");
var video = document.querySelectorAll('video');
function setDataIndex() {
for (i = 0; i < playVideo.length; i++){
playVideo[i].setAttribute('data-index', i);
modal[i].setAttribute('data-index', i);
modalClose[i].setAttribute('data-index', i);
video[i].setAttribute('data-index', i);
}
}
for (i = 0; i < playVideo.length; i++){
playVideo[i].onclick = function() {
var ElementIndex = this.getAttribute('data-index');
modal[ElementIndex].style.display = "block";
};
modalClose[i].onclick = function() {
var ElementIndex = this.getAttribute('data-index');
modal[ElementIndex].style.display = "none";
video.forEach(video => video.pause());
};
}
window.onload = function() {
setDataIndex();
};
window.onclick = function(event) {
if (event.target === modal[event.target.getAttribute('data-index')]) {
modal[event.target.getAttribute('data-index')].style.display = "none";
video[ElementIndex].play();
}
};
// modal and video

Add a button to change to dark mode in html website

I have added a button on my site which let's the users change to dark or light mode whenever they want. I added the button with a moon icon on it, but the problem is that I want that the moon icon changes to sun icon when the user is in dark mode. And changes to moon icon when user is in light mode.
function myfunction(e) {
console.log("you clicked");
document.documentElement.classList.toggle("dark-mode");
document.querySelectorAll(".inverted").forEach((result) => {
result.classList.toggle("invert");
});
}
const btn = document.querySelector('.btn')
btn.addEventListener('click', myfunction);
.dark-mode {
filter: invert(1) hue-rotate(180deg);
}
.invert {
filter: invert(1) hue-rotate(180deg);
}
<button class="btn"><img src='moon.png'></img></button>
The .inverted class in js is because I don't want the images to invert their colors.. so I gave all the images a class='inverted'
So, this is what I've done and someone please let me know how I should change the icon to moon and sun depending on the current mode (light or dark)
Thanks!

You could add the sun as another image to the button and change the visibility of the two images via your .dark-mode css class.
So whenever the .dark-mode class is present the moon gets hidden and the sun gets shown.
function myfunction(e) {
console.log("you clicked");
document.documentElement.classList.toggle("dark-mode");
document.querySelectorAll(".inverted").forEach((result) => {
result.classList.toggle("invert");
});
}
const btn = document.querySelector('.btn')
btn.addEventListener('click', myfunction);
.dark-mode {
filter: invert(1) hue-rotate(180deg);
}
.invert {
filter: invert(1) hue-rotate(180deg);
}
/* button handling */
.moon {
display: block;
}
.sun {
display: none;
}
.dark-mode .moon {
display: none;
}
.dark-mode .sun {
display: block;
}
<button class="btn">
<img class="moon" src="moon.png" alt="moon"></img>
<img class="sun" src="sun.png" alt="sun"></img>
</button>

You could go with the CSS approach as in #Fabian's answer. If you would like to go with JS, you could simply use a flag to indicate whether or not the user switched to dark mode, and dynamically set the icon based on it.
let isDarkMode = document.documentElement.classList.contains("dark-mode");
function myfunction(e) {
document.documentElement.classList.toggle("dark-mode");
document.querySelectorAll(".inverted").forEach((result) => {
result.classList.toggle("invert");
});
e.currentTarget.querySelector("img").src = isDarkMode ? "sun.png" : "moon.png";
}

You can use the below reference for the toggle button from light mode to dark mode and dark mode to light mode.
body {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.toggle-checkbox {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
.toggle-slot {
position: relative;
height: 10em;
width: 20em;
border: 5px solid #e4e7ec;
border-radius: 10em;
background-color: white;
box-shadow: 0px 10px 25px #e4e7ec;
transition: background-color 250ms;
}
.toggle-checkbox:checked ~ .toggle-slot {
background-color: #374151;
}
.toggle-button {
transform: translate(11.75em, 1.75em);
position: absolute;
height: 6.5em;
width: 6.5em;
border-radius: 50%;
background-color: #ffeccf;
box-shadow: inset 0px 0px 0px 0.75em #ffbb52;
transition: background-color 250ms, border-color 250ms, transform 500ms cubic-bezier(.26,2,.46,.71);
}
.toggle-checkbox:checked ~ .toggle-slot .toggle-button {
background-color: #485367;
box-shadow: inset 0px 0px 0px 0.75em white;
transform: translate(1.75em, 1.75em);
}
.sun-icon {
position: absolute;
height: 6em;
width: 6em;
color: #ffbb52;
}
.sun-icon-wrapper {
position: absolute;
height: 6em;
width: 6em;
opacity: 1;
transform: translate(2em, 2em) rotate(15deg);
transform-origin: 50% 50%;
transition: opacity 150ms, transform 500ms cubic-bezier(.26,2,.46,.71);
}
.toggle-checkbox:checked ~ .toggle-slot .sun-icon-wrapper {
opacity: 0;
transform: translate(3em, 2em) rotate(0deg);
}
.moon-icon {
position: absolute;
height: 6em;
width: 6em;
color: white;
}
.moon-icon-wrapper {
position: absolute;
height: 6em;
width: 6em;
opacity: 0;
transform: translate(11em, 2em) rotate(0deg);
transform-origin: 50% 50%;
transition: opacity 150ms, transform 500ms cubic-bezier(.26,2.5,.46,.71);
}
.toggle-checkbox:checked ~ .toggle-slot .moon-icon-wrapper {
opacity: 1;
transform: translate(12em, 2em) rotate(-15deg);
}
<head>
<script src="https://code.iconify.design/1/1.0.4/iconify.min.js"> </script>
</head>
<label>
<input class='toggle-checkbox' type='checkbox'>
<div class='toggle-slot'>
<div class='sun-icon-wrapper'>
<div class="iconify sun-icon" data-icon="feather-sun" data-inline="false"></div>
</div>
<div class='toggle-button'></div>
<div class='moon-icon-wrapper'>
<div class="iconify moon-icon" data-icon="feather-moon" data-inline="false"></div>
</div>
</div>
</label>

function myfunction(e) {
const doc = document.documentElement
doc.classList.toggle("dark-mode");
document.querySelectorAll(".inverted").forEach((result) => {
result.classList.toggle("invert");
});
const img = e.currentTarget.querySelector('img')
const label = e.currentTarget.querySelector('span')
if (doc.classList.contains('dark-mode')) {
img.src = 'sun.png'
label.innerHTML = 'Light mode'
} else {
img.src = 'moon.png'
label.innerHTML = 'Dark mode'
}
}
const btn = document.querySelector('.btn')
btn.addEventListener('click', myfunction);
.dark-mode {
filter: invert(1) hue-rotate(180deg);
}
.invert {
filter: invert(1) hue-rotate(180deg);
}
'
<button class="btn">
<img src='moon.png' alt="" />
<span>Dark mode</span>
</button>

How do I make an extension's html background invisible?

I´m trying to do a test extension for chrome for a university project but I can´t find a way to make the background or body of the extension´s html completely invisible, just for a clean interface. The problems I´m having are those white corners on the background.
This is the code of the extension:
// Define variables
let audio, playbtn, title, poster, artists, mutebtn, seekslider, volumeslider,
seeking = false, seekto, curtimetext, durtimetext, playlist_status, dir, playlist,
ext, agent, playlist_artist, repeat, randomSong;
// Initialization of YouTube Api
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;
var id = '5_385OOZlIg';
var url = 'https://www.youtube.com/watch?v=' + id;
// Initialization of Array of Music, Tittle, Poster Image, Artists
dir = "music/";
playlist = ["Cartoon-On-_-On","Elektronomia","Johnning","Popsicle","Fearless"];
title = ["Cartoon - On & On","Elektronomia","Janji-Heroes Tonight","Popsicle","Lost Sky - Fearless"];
artists = ["(feat. Daniel Levi) [NSC Release]","Elektronomia - Sky High [NCS Release]","(feat. Johnning) [NCS Release]",
"LFZ - [NCS Release]","(feat. Chris Linton)[NCS Release]"];
poster = ["images/ncs1.jpeg","images/ncs2.jpg","images/ncs3.jpg","images/ncs4.jpg","images/ncs5.jpg"];
// Used to run on every browser
ext = ".mp3";
agent = navigator.userAgent.toLowerCase();
if(agent.indexOf('firefox') != -1 || agent.indexOf('opera') != -1){
ext = ".ogg";
}
// Set object references
playbtn = document.getElementById("playpausebtn");
nextbtn = document.getElementById("nextbtn");
prevbtn = document.getElementById("prevbtn");
mutebtn = document.getElementById("mutebtn");
visibilitybtn = document.getElementById("visibility");
seekslider = document.getElementById("seekslider");
volumeslider = document.getElementById("volumeslider");
curtimetext = document.getElementById("curtimetext");
durtimetext = document.getElementById("durtimetext");
playlist_status = document.getElementById("playlist_status");
playlist_artist = document.getElementById("playlist_artist");
repeat = document.getElementById("repeat");
randomSong = document.getElementById("random");
playlist_index = 0;
// Audio Object
audio = new Audio();
audio.src = dir + playlist[0] + ext; // music/musicname.mp3
audio.loop = false;
// First song title and artist
playlist_status.innerHTML = title[playlist_index];
playlist_artist.innerHTML = artists[playlist_index];
// Add event handling
playbtn.addEventListener("click", playPause);
nextbtn.addEventListener("click", nextSong);
prevbtn.addEventListener("click", prevSong);
mutebtn.addEventListener("click", mute);
visibilitybtn.addEventListener("click", toggle);
seekslider.addEventListener("mousedown", function(event){seeking = true; seek(event);});
seekslider.addEventListener("mousemove", function(event){seek(event);});
seekslider.addEventListener("mouseup", function(){seeking = false;});
volumeslider.addEventListener("mousemove", setvolume);
audio.addEventListener("timeupdate", function(){seektimeupdate();});
audio.addEventListener("ended",function(){switchTrack();});
repeat.addEventListener("click", loop);
randomSong.addEventListener("click", random);
// Functions
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '315',
width: '560',
videoId: id,
playerVars: {'autoplay': 0, 'controls': 0, 'loop': 1},
events: {
'onStateChange': onPlayerStateChange
}
});
}
/*
function onPlayerReady(event) {
let pgd = player.getDuration();
let vpb = document.getElementById("video_progress_bar");
vpb.setAttribute("max",pgd);
}*/
//Intento de que la barra de progreso avance con forme al video onPlayerStateChange(event) y onPlay()
var testThread;
function onPlayerStateChange(event) {
if(event.data == 1)
{
testThread = setInterval(seektimeupdate,500);
}else{
clearInterval(testThread);
}
}
// Oculta o hace visible el video de YouTube en la interfaz
function toggle(element){
let ventana = document.getElementById("player");
if(ventana.style.display != 'none'){
ventana.style.display = 'none';
}else{
ventana.style.display = '';
}
}
function fetchMusicDetails(){
// Poster Image, Pause/Play Image
$("#playpausebtn img").attr("src", "images/pause-red.png");
$("#bgImage").attr("src", poster[playlist_index]);
$("#image").attr("src",poster[playlist_index]);
// Title and Artist
playlist_status.innerHTML = title[playlist_index];
playlist_artist.innerHTML = artists[playlist_index];
// Audio
audio.src = dir + playlist[playlist_index] + ext;
audio.play();
}
function playPause(element){
let playButton = document.getElementById("playpausebtn");
if(playButton.value == "play"){
playButton.setAttribute("value","pause");
player.playVideo()
$("#playpausebtn img").attr("src","images/pause-red.png");
}else{
playButton.setAttribute("value","play");
player.pauseVideo();
$("#playpausebtn img").attr("src","images/play-red.png");
}
}
function nextSong(){
playlist_index++;
if(playlist_index > playlist.length - 1){
playlist_index = 0;
}
fetchMusicDetails();
}
function prevSong(){
playlist_index--;
if(playlist_index < 0){
playlist_index = playlist.length - 1;
}
fetchMusicDetails();
}
function mute(){
if(player.isMuted()){
player.unMute();
$("#mutebtn img").attr("src","images/speaker.png");
}else{
player.mute();
$("#mutebtn img").attr("src","images/mute.png");
}
}
function seek(event){
if(player.getDuration() == 0){
null;
}else{
if(seeking){
seekslider.value = event.clientX - seekslider.offsetLeft;
seekto = player.getDuration() * (seekslider.value / 100);
player.seekTo(seekto);
}
}
}
function setvolume(){
player.setVolume(volumeslider.value);
}
function seektimeupdate(){
if(player.getDuration()){
let nt = player.getCurrentTime() * (100 / player.getDuration());
seekslider.value = nt;
var curmins = Math.floor(player.getCurrentTime() / 60);
var cursecs = Math.floor(player.getCurrentTime() - curmins * 60);
var durmins = Math.floor(player.getDuration() / 60);
var dursecs = Math.floor(player.getDuration() - durmins * 60);
if(cursecs < 10){cursecs = "0" + cursecs}
if(dursecs < 10){dursecs = "0" + dursecs}
if(curmins < 10){curmins = "0" + curmins}
if(durmins < 10){durmins = "0" + durmins}
curtimetext.innerHTML = curmins + ":" + cursecs;
durtimetext.innerHTML = durmins + ":" + dursecs;
}else{
curtimetext.innerHTML = "00" + ":" + "00";
durtimetext.innerHTML = "00" + ":" + "00";
}
}
function switchTrack(){
if(playlist_index == (playlist.length -1)){
playlist_index = 0;
}else{
playlist_index++;
}
fetchMusicDetails();
}
function loop(){
if(audio.loop){
audio.loop = false;
$("#repeat img").attr("src", "images/rep.png");
}else{
audio.loop = true;
$("#repeat img").attr("src", "images/rep1.png");
}
}
function getRandomNumber(min, max){
let step1 = max - min + 1;
let step2 = Math.random() * step1;
let result = Math.floor(step2) + min;
return result;
}
function random(){
let randomIndex = getRandomNumber(0 , playlist.length - 1);
playlist_index = randomIndex;
fetchMusicDetails();
}
body{
margin: 0;
padding: 0;
height: 100vh;
width: 100%;
background-color: rgba(0,0,0,0);
font-family: 'Poppins', sans-serif;
}
button{
border: none;
outline: none;
background: none;
cursor: pointer;
}
.music-container{
height: 100vh;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.music-content{
position: relative;
width: 245px;
height: 450px;
background-color: #000;
border-width: 8px 4px !important;
border: solid;
border-radius: 20px;
overflow: hidden;
box-shadow: 5px 5px 10px rgba(0, 0, 0, .52);
}
#bg-image img{
width: 110%;
height: 110%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
z-index: 1;
filter: blur(6px);
-webkit-filter: blur(5px);
}
#blacklayer{
height: 450px;
width: 100%;
background-color: rgba(0,0,0,.404);
position: absolute;
z-index: 2;
}
#menu{
position: relative;
z-index: 3;
padding: 15px;
display: flex;
justify-content: space-between;
align-items: center;
}
#menu img{
width: 15px;
height: 15px;
cursor: pointer;
}
#volume-container{
position: relative;
width: 100%;
height: 15px;
z-index: 3;
display: flex;
justify-content: center;
align-items: center;
}
#volume-container img{
width: 16px;
height: 16px;
margin: 0 5px;
}
.slider{
width: 110px;
height: 1px !important;
-webkit-appearance: none;
border-radius: 10px;
background-color: #fff;
z-index: 100;
outline: none;
position: relative;
}
.slider::-webkit-slider-thumb{
-webkit-appearance: none;
width: 10px;
height: 10px;
background-color: #e62c2f;
border-radius: 50%;
cursor: pointer;
outline: none;
transform: scale(1);
}
.slider:active::-webkit-slider-thumb{
transform: scale(1.2);
}
#music-image{
position: relative;
width: 100%;
height: 215px;
z-index: 3;
}
#circle-image{
position: absolute;
top: -33%;
left: 50%;
transform: translate(-50%,50%);
width: 120px;
height: 120px;
background-color: #000;
border-radius: 50%;
border: 5px solid rgba(221,221,221,0.897);
overflow: hidden;
}
#music-image img{
width: 100%;
height: 100%;
}
#player{
position: absolute;
top: -33%;
left: 50%;
transform: translate(-50%,27%);
width: 120px;
height: 120px;
background-color: #000;
border-radius: 50%;
border: 5px solid rgba(221,221,221,0.897);
overflow: hidden;
}
#music-title{
position: relative;
padding: 0 25px;
top: 65%;
color: #fff;
}
#music-title h5{
color: #fff;
font-size: 20px;
margin: 20px 0 5px;
font-weight: 300;
text-align: center;
line-height: 1.2;
}
#music-title h6{
margin: 0;
font-size: 12.5px;
text-align: center;
font-weight: 400;
}
#music-menu{
width: 90%;
height: 40px;
position: relative;
z-index: 3;
display: flex;
justify-content: space-around;
align-items: center;
margin: 0 auto;
}
#music-menu img{
width: 15px;
height: 15px;
cursor: pointer;
}
#visibility{
width: 20px;
height: 20px;
cursor: pointer;
}
#currentTime{
position: relative;
z-index: 3;
padding: 0 12px 5px;
color: #fff;
display: flex;
justify-content: space-between;
margin-top: 8px;
}
#currentTime span{
font-size: 12px;
}
.seekslider{
width: 100px;
height: 2px !important;
-webkit-appearance: none;
border-radius: 10px;
background-color: #fff;
z-index: 3;
outline: none;
position: fixed;
margin-left: 70px;
}
.seekslider::-webkit-slider-thumb{
-webkit-appearance: none;
width: 10px;
height: 10px;
background-color: #e62c2f;
border-radius: 50%;
cursor: pointer;
outline: none;
transform: scale(1);
}
.seekslider:active::-webkit-slider-thumb{
transform: scale(1.2);
}
#buttons{
position: relative;
width: 100%;
height: 50px;
z-index: 3;
margin-top: 20px;
}
#buttons div{
display: flex;
justify-content: center;
align-items: center;
}
.play{
width: 60px;
height: 50px;
margin: 0 5px;
}
.play img{
width: 100%;
height: 100%;
}
.prev img,
.next img{
width: 20px;
height: 20px;
}
#buttons .like{
position: absolute;
top: 25%;
right: 8%;
cursor: pointer;
}
#buttons .like i{
color: rgba(255,255,255,0.883);
}
#buttons .repeat{
position: absolute;
top: 30%;
left: 6%;
font-size: 15px;
cursor: pointer;
}
#repeat img{
width: 16px;
height: 16px;
}
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset="UTF-8">
<title>Music Player</title>
<link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body>
<div class="music-container">
<div class="music-content">
<div id="bg-image">
<div id="blackLayer"></div>
<img src="images/ncs1.jpeg" alt="" id="bgImage">
</div>
<div id="menu">
<img src="images/menu.png" alt="">
<img src="images/search.png" alt="">
</div>
<div id="volume-container">
<img src="images/volume-low.png" alt="" id="volumn-down">
<input type="range" class="slider" id="volumeslider" min="0" max="100" value="100" step="1">
<img src="images/volumn-high.png" alt="" id="volumn-up">
</div>
<div id="music-image">
<div id="circle-image">
<div id="player"></div>
<img src="images/ncs1.jpeg" alt="" id="image">
</div>
<div id="music-title">
<h5 id="playlist_status"></h5>
<h6 id="playlist_artist"></h6>
</div>
</div>
<div id="music-menu">
<button id="random"><img src="images/random.png" alt=""></button>
<button id="visibility"><img src="images/video-on.png" alt=""></button>
<button id="mutebtn"><img src="images/speaker.png" alt=""></button>
</div>
<div id="currentTime">
<span id="curtimetext">00:00</span>
<span id="durtimetext">00:00</span>
</div>
<input type="range" class="seekslider" id="seekslider" min="0" max="100" value="0" step="1">
<div id="buttons">
<button class="repeat" id="repeat"><img src="images/rep.png" alt=""></button>
<div>
<button class="prev" id="prevbtn"><img src="images/backward.png" alt=""></button>
<button class="play" id="playpausebtn" value="play"><img src="images/play-red.png" alt=""></button>
<button class="next" id="nextbtn"><img src="images/forward.png" alt=""></button>
</div>
<span class="like">
<i class="far fa-heart" aria-hidden="true"></i>
</span>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
<!-- begin snippet: js hide: false console: true babel: false -->
// Manifest.json
{
"manifest_version" : 2,
"name" : "OdisseyChromeExtension",
"description" : "Reproductor de musica youtube",
"version" : "0.3",
"browser_action" : {
"default_popup" : "index.html",
"default_title" : "odissey"
},
"content_security_policy": "script-src 'self' https://www.youtube.com/iframe_api https://www.youtube.com/s/player/9f996d3e/www-widgetapi.vflset/www-widgetapi.js https://code.jquery.com/jquery-3.5.1.min.js; object-src 'self'",
"permissions": [
"activeTab",
"storage",
"tabs",
"http://*/*" , "https://*/*",
"cookies",
"identity",
"identity.email"
]
}
This is the extension appearance

Okey this might actually solve your problem.
As the background is there because of the iframe, embed a player into an <object> or <video> tag..
<object width={ width } height={ height }>
<video src={ playlists['mylist'].JSON[index].source } type="video/webp" width="100%" height="333" objectFit="cover" />
</object>
Then just get a JSON of the playlist. If you want higher functionality like search or managment of user created playlists you need to go through Googles Data API. It can be finicky in the beggining but well worth the time.
here are some code examples:
https://developers.google.com/youtube/v3/docs/playlists/list?apix=true
Otherwise if you have set playlists in the player, you can just datamine separately and create your own JSON arrays, even manually its really simple and won't even take a minute per list when you have your mining snippet. A small upside here is you can dynamically create custom playlists outside of youtube.
then you can have three players and have them preload the previous and next video for a smoother switching experience ( an option for a fade inbetween can also be nice )
I have snippets of code somewhere for this kind of setup, if this sounds like something you care to do I can try to dig them up for you.
happy coding! :)

How to make video player function and hit the red bar

I have got a basic video player and i followed a tutorial on how to create it, but when you click on the play button, then nothing happens as it does not play the video. Also I have got a red bar on the video as the progress, which is displayed all the time, but i only want it to be displayed on hove, so how can I achieve this as i followed the same youtube video as above.
I have followed a youtube and searched the internet, but i have been unable to fin a solution.
HTML
<div class="c-video">
<video class="galaxy-video" src="../videoplayer/intro.mkv"></video>
<div class="controls">
<div class="blue-bar">
<div class="blue-juice"></div>
</div>
<div class="buttons">
<button id="play-pause"></button>
</div>
</div>
</div>
CSS
.galaxy-video{
width: 100%;
height: 700px;
}
.c-video{
width: 100%;
position: relative;
overflow: hidden;
}
.c-video:hover .controls{
transform: translateY(0);
}
.controls{
display: flex;
position: absolute;
bottom: 5px;
width: 1245px;
margin-left: 155px;
flex-wrap: wrap;
background: rgba(0, 0, 0, 0.7);
transform: translateY(100%);
transition: all 0.2s;
}
.buttons{
padding: 10px;
}
.buttons button{
background: none;
border:0;
outline: 0;
cursor: pointer;
}
.buttons button:before{
content: '\f144';
font-family: 'Font Awesome 5 Free';
width: 30px;
height: 30px;
display: inline-block;
font-size: 28px;
color: #fff;
-webkit-font-smoothing: antialiased;
}
.buttons button.play:before{
content: '\f144';
}
.buttons button.pause:before{
content: '\f28b';
}
.blue-bar{
height: 10px;
top: 0;
left:0;
width: 100%;
background: #000;
}
.blue-juice{
height:10px;
background-color: #ff0000;
}
Javascript
var video = document.querySelector(".galaxy-video");
var juice = document.querySelector(".blue-juice");
var btn = document.getElementById("play-pause");
function togglePlayPause() {
if (video.paused) {
btn.className = "pause";
video.play();
} else {
btn.className = "play";
video.pause();
}
}
btn.onclick = function() {
togglePlayPause();
};
Here is a screen shot of the red bar that i wish to only be displayed on hover:
https://imgur.com/AqtYNg4
Any help appreciated and thanks in advance.

(1)
"When you click on the play button, then nothing happens as it does not play the video."
You need to attach a listener to your button (listening for a "click" event).
<button id="play-pause" onClick="togglePlayPause();"> </button>
Then that should respond to your function togglePlayPause like this...
function togglePlayPause()
{
if (video.paused) { video.play(); btn.className = "pause"; }
else { video.pause(); btn.className = "play"; }
}
(2)
"Also I have got a red bar on the video as the progress, which is displayed all the time, but I only want it to be displayed on hover"
Simply add a "Hover" rule to the CSS of your target element.
.myDivID :hover {
//some hover-related code here...
}
The final setup could look like:
a) The target div is styled to have zero opacity (now is fully transparent).
<div class="blue-bar" style="opacity: 0">
b) Then your CSS rules would be like below (where opacity is animated to increase to 1.0)...
.blue-bar{
height: 10px;
top: 0;
left:0;
width: 100%;
background: #000;
}
.blue-bar:hover {
opacity: 1.0;
transition: transform 1.5s;
}
.blue-juice{
height:10px;
background-color: #ff0000;
}

How to detect a function and then fulfill conditional to remove html element by using javascript

One more time I need your help. I've used star wars intro and to display it I created buttons. It is played in popup div, but the footer makes height of container too big in for me so I want to remove this element when the code of star wars is displayed.
//start music
function play(){
var audio = document.getElementById("audio");
audio.play();
}
//stop music
function stop(){
var audio = document.getElementById("audio");
audio.pause();
audio.currentTime = 0;
}
//sekwenscja star wars
var sWidth; //screen width
var sHeight; //screen height
var canvas;
var context;
var numOfStars;
var starDensity = 1800; //lower == more stars
var starColors = ["#111", "#333", "#555", "#7872a8", "#483f26"];
var audio = $('audio').get(0);
$(document).ready(function() {
//Play the theme song
setTimeout(function() {
audio.play();
}, 7600);
//Get the window size
sWidth = $(window).width();
sHeight = $(window).height();
//Get the canvas
canvas = $('#starfield');
//Fill out the canvas
canvas.attr('height', sHeight);
canvas.attr('width', sWidth);
context = canvas[0].getContext('2d');
//Calculate the number of stars
numOfStars = Math.floor((sWidth * sHeight) / starDensity);
console.log(numOfStars);
//Draw the stars
function stars() {
for (i=0;i<numOfStars;i++) {
//Get a random star color
var starColor = starColors[Math.floor(Math.random()*5)];
//Get a random x-position
var starX = Math.floor(Math.random()*sWidth);
//Get a random y-position
var starY = Math.floor(Math.random()*sHeight);
//Draw
context.beginPath();
context.arc(starX, starY, 1, 0, 2 * Math.PI);
context.fillStyle = starColor;
context.fill();
}
}
//Draw the stars
stars();
});
.white_content {
display: none;
position: absolute;
top: 0;
width: 100%;
height: 100%;
background-color: black;
z-index:1002;
overflow: auto;
}
div#glowne {
position: relative;
width: 100%;
max-width: 1920px;
height: 100%;
max-height: 1080px;
font-family: 'Open Sans';
overflow: hidden;
}
#media screen and (min-width: 1600px) {
body {
margin: 0 auto;
}
}
/* In case of no audio support */
audio {
position: absolute;
top: 0;
left: 0;
color: white;
font-size: 14px;
font-weight: 700;
}
#starfield {
z-index: 1;
opacity: 0;
position: absolute;
animation: starfield 0s 8s forwards;
}
#keyframes starfield {
to { opacity: 1; }
}
.long-time {
z-index: 2;
opacity: 0;
position: absolute;
color: #00d7ff;
top: 50%;
left: 51%;
width: 65%;
transform: translate3d(-50%,-50%,0);
font-size: 30px;
font-size: 4.5vw;
line-height: 1.5em;
animation: long-time 5s 1s forwards;
}
#media screen and (min-width: 1600px) {
.long-time {
font-size: 5.0em;
}
}
#keyframes long-time {
0% { opacity: 0; }
18% { opacity: 1; }
82% { opacity: 1; }
100% { opacity: 0; }
}
.logo {
opacity: 0;
z-index: 3;
position: absolute;
width: 100%;
top: 50%;
left: 50%;
transform: translate3d(-50%,-50%,0);
animation: logo 10s 8s cubic-bezier(0,.1,.2,1); forwards;
}
#keyframes logo {
0% { opacity: 1; }
98% { opacity: 1; }
100% { width: 40px;
opacity: 0; }
}
.crawl-container {
z-index: 2;
position: absolute;
bottom: 0;
width: 100%;
height: 350vh;
max-height: 3000px;
/**/color: #ffe029;
/**/text-align: justify;
/**/overflow: hidden;
/**/transform-origin: 50% 100%;/**/
/**/transform: perspective(200px) rotateX(16deg);
/**/animation: crawl-container 0s 17s forwards;
}
#keyframes crawl-container {
to { opacity: 1; }
}
.crawl-container .crawl {
z-index: 2;
position: absolute;
top: 100%; /*skąd zaczyna przewijany tekst historii wypływać*/
width: 100%;
animation: crawl 170s 17s linear forwards;
}
.crawl p {
margin-left: auto;
margin-right: auto;
padding: 0 10%;
max-width: 1500px;
}
.crawl p.title {
font-size: 3em;
font-size: 5vw;
text-align: center;
}
.crawl p.title-1 {
margin-bottom: .7em;
}
.crawl p.title-2 {
margin-bottom: 1.2em;
}
.crawl p.title-2 img {
width: 65%;
height: auto;
}
p.crawl-p {
text-align: justify;
font-size: 5.6vw;
margin-bottom: 1.2em;
}
#media screen and (min-width: 1600px) {
p.crawl-p {
font-size: 5.0em;
}
}
#keyframes crawl {
to { top: -250%; }
}
<div id="primary" class="content-area">
<main id="main" class="site-main" role="main">
<a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'"><input type="button" value="WEJDŹ" onclick="play()">
<audio id="audio" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331813/sw-7-theme.ogg" type="audio/ogg"></audio></a>
<div id="light" class="white_content">
<div id="glowne">
<audio preload="auto">
<source src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331813/sw-7-theme.ogg" type="audio/ogg">
<source src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331813/sw-7-theme.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<canvas id="starfield"></canvas>
<div class="long-time">A long time ago in a galaxy far,<br />far away....</div>
<img class="logo" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331813/star-wars-7-logo.png" />
<div class="crawl-container">
<div class="crawl">
<p class="title title-1">Episode VII</p>
<p class="title title-2"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331813/the-force-awakens.png"></p>
<p class="crawl-p">Luke Skywalker has vanished. In his absence, the sinister FIRST ORDER has risen from the ashes of the Empire and will not rest until Skywalker, the last Jedi, has been destroyed.</p>
<p class="crawl-p">With the support of the REPUBLIC, General Leia Organa leads a brave RESISTANCE. She is desperate to find her brother Luke and gain his help in restoring peace and justice to the galaxy.</p>
<p class="crawl-p">Leia has sent her most daring pilot on a secret mission to Jakku, where an old ally has discovered a clue to Luke's whereabouts....</p>
</div>
</div></div><input type="button" value="ZAKOŃCZ" onclick="stop()"></div>
<div id="fade" class="black_overlay"></div>
<?php
// Start the loop.
while ( have_posts() ) : the_post();
// Include the page content template.
get_template_part( 'template-parts/content', 'page' );
// If comments are open or we have at least one comment, load up the comment template.
if ( comments_open() || get_comments_number() ) {
comments_template();
}
// End of the loop.
endwhile;
?>
</main><!-- .site-main -->
<?php get_sidebar( 'content-bottom' ); ?>
</div><!-- .content-area -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>

Use this to hide the footer
document.getElementById('footerID').style.display='none';

Without knowing the HTML for your footer it is impossible to be exact, but you can simply hide it within the ready function:
$( /* unique selector for your footer */ ).hide();
I'd probably put this at the start of the ready function, but looking at your code the specific place you call should be pretty irrelevant.
P.S.
You could also call $( /* ...footer */ ).remove();, but hiding it will allow you to show it again should the need arise.