Having trouble with the muted attribute on my video when it is cloned.
I have a video I am getting from firebase storage. When cloning the video to another section of my Web app, the muted attribute removes itself and the sound comes back on.
Does anyone know why this is happening and how to get around it?
function getData(folder){
let newFile = folder.toString().toLowerCase();
console.log(newFile);
// Create a reference under which you want to list -> variable "newFile" to select what file to load.
const listRef = ref(storage, newFile);
// Find all the prefixes and items.
listAll(listRef)
.then((res) => {
res.prefixes.forEach((folderRef) => {
});
res.items.forEach((itemRef) => {
getDownloadURL(itemRef).then((url) =>{
// Make the videoCard
let videoCard = document.createElement('div');
videoCard.classList = "videoCard";
// Add vid section
let vid = document.createElement('div');
vid.classList = "vid";
videoCard.appendChild(vid);
// Make videocard
let newVideo = document.createElement('video');
newVideo.src =`${url}`
newVideo.setAttribute('width', 300)
newVideo.classList.add('videoAdded')
newVideo.autoplay = true;
newVideo.muted = true;
newVideo.loop = true;
vid.appendChild(newVideo);
// Make heading and button
let headingDiv = document.createElement('div');
headingDiv.classList = "heading_add"
let newh2 = document.createElement('h2');
newh2.innerHTML = itemRef.name;
headingDiv.appendChild(newh2)
videoCard.appendChild(headingDiv)
// Button for h2
let newBtn = document.createElement('button');
newBtn.classList = "add_video_btn";
newBtn.innerHTML = "+";
headingDiv.appendChild(newBtn);
videos.appendChild(videoCard);
newBtn.addEventListener('click', () =>{
const exercises = document.querySelector('.exercises');
const clone = videoCard.cloneNode(true);
console.log(clone)
exercises.appendChild(clone)
});
})
});
}).catch((error) => {
// FUCK! An error occurred!
console.log(error)
});
}