How to display a video template if a "video" field exists in firestore?

user_13031693 0
Viewed 28

Hello I'm trying to display a video using template literals everything is working fine but now I wish to hide the template if the video field in firestore is empty or doesn't exists

enter image description here

If the field video has the embbed value in firestore the video correctly displays

enter image description here

But if the field video doesn't have any value then the iframe tag still shows up and I'd like to hide it

Here is my code



const video  = document.getElementById('video');
let path3 = `Ludolab/offer/list/${idRef}/index/${idCon}/content`;
let collRef3 = db.collection(path3);
collRef3.onSnapshot((querySnapshot) => {
  video.innerHTML = '';
  querySnapshot.forEach((doc) => {
    video.innerHTML +=`  
    <iframe class="has-ratio" width="150" height="150" src="https://www.youtube.com/embed/${doc.data().video}" 
            frameborder="0" allowfullscreen> 
    </iframe>
                         
        `
  });
});

Any help is gladly appreciate it, thanks in advance.

google-cloud-firestore html jquery javascript
1 Answers

You can add a simple if statement that adds another iframe only when video field is present:

collRef3.onSnapshot((querySnapshot) => {
  video.innerHTML = '';
  querySnapshot.forEach((doc) => {
    if (doc.data().video) {
      // video field present, add iframe
      video.innerHTML += `  
    <iframe class="has-ratio" width="150" height="150" src="https://www.youtube.com/embed/${doc.data().video}" 
            frameborder="0" allowfullscreen> 
    </iframe>`
    }
  });
});
user_131306970
Related