How to make html widgets display properly on 3d globe

Question

using threejs here is a screenshot

as you see here the news widget is not displaying properly within the label, what can I do to get it to display properly? here is my code

#info{
  position: absolute;
  bottom: 1vh;
  color: teal;
  width: 100%;
  font-family: Monospace;
  text-align: center;
}
iframe:focus { 
  outline: none;
}
  
  
  iframe[seamless] {
    /*width:230px;
    height: 348px;*/
    background: none;
    display: block;
    position: absolute;
    border: none;
    
  }

/*#markerLabel {
  --baseColor: rgb(255, 250, 250);*/
/*#markerLabel {
  --baseColor: rgb(255, 250, 250);
  width: 20px;
  height: 30px;
  color: var(--baseColor);
  /*font-family: Monospace;
  font-size: 14px;
  font-weight: 700;
  /*padding: 2px;*/
  /*background: none;
  /*border: 2px solid var(--baseColor);
  border-radius: 5px;*/
  //*margin-top: -25px
  */
  /*overflow: hidden;*/
  /*padding: 0px;*/
}*/
#markerLabel {
  position: "static";
    object-fit: contain;
    font-family: 'Space Mono', monospace;
    transition: 0.3s;
    background: transparent;
    width: 290px;
    border: 4px solid  rgb(0, 107, 63) ;
    border-radius: 10px;
    z-index: 2;
    margin: 0;
    padding: 0;
}
#idNum {
  width:120px;
  height:240px;
  display: block;
}
.hidden{
  display: none;
}

.text {
  /*margin-left: 4px;*/
}

#closeButton{
  position: absolute;
  right: 0px;
  top: 0px;
  font-family: Arial;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  border: 1px solid gray;
  border-radius: 3px;
  background: transparent;
  color: white;
}



      
    </style>
    

code for the label:

// <Label>
let labelDiv = document.getElementById("markerLabel");
let closeBtn = document.getElementById("closeButton");
closeBtn.addEventListener("pointerdown", event => {
  labelDiv.classList.add("hidden");
})
let label = new CSS2DObject(labelDiv);
label.userData = {
  cNormal: new THREE.Vector3(),
  cPosition: new THREE.Vector3(),
  mat4: new THREE.Matrix4(),
  trackVisibility: () => { // the closer to the edge, the less opacity
    let ud = label.userData;
    ud.cNormal.copy(label.position).normalize().applyMatrix3(globe.normalMatrix);
    ud.cPosition.copy(label.position).applyMatrix4(ud.mat4.multiplyMatrices(camera.matrixWorldInverse, globe.matrixWorld));
    let d = ud.cPosition.negate().normalize().dot(ud.cNormal);
    d = smoothstep(0.2, 0.7, d);
    label.element.style.opacity = d;
    
    // https://github.com/gre/smoothstep/blob/master/index.js
    function smoothstep (min, max, value) {
      var x = Math.max(0, Math.min(1, (value-min)/(max-min)));
      return x*x*(3 - 2*x);
    };
  }
}
scene.add(label);
// </Label>

// <Interaction>
let pointer = new THREE.Vector2();
let raycaster = new THREE.Raycaster();
let intersections;
let divID = document.getElementById("idNum");
//let divMag = document.getElementById("magnitude");
//let divCrd = document.getElementById("coordinates");
window.addEventListener("pointerdown", event => {
  pointer.x = ( event.clientX / window.innerWidth ) * 2 - 1;
    pointer.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
  raycaster.setFromCamera(pointer, camera);
  intersections = raycaster.intersectObject(markers).filter(m => {
    return (m.uv.subScalar(0.5).length() * 2) < 0.25; // check, if we're in the central circle only
  });
  //console.log(intersections);
  if (intersections.length > 0) {
    let iid = intersections[0].instanceId;
    let mi = markerInfo[iid];
    divID.innerHTML = `<iframe frameborder="0" allowfullscreen="true" sandbox="allow-same-origin allow-scripts allow-popups allow-forms allow-modals allow-popups-to-escape-sandbox" loading="eager" src="https://rss.app/embed/v1/wall/t0OXjFMGzjEUhPqm"></iframe>
          <link rel="stylesheet" href="input.css"> <!--Copy this line of code-->
         `;
    /*divMag.innerHTML = `Mag: <b>${mi.mag}</b>`;
    divCrd.innerHTML = `X: <b>${mi.crd.x.toFixed(2)}</b>; Y: <b>${mi.crd.y.toFixed(2)}</b>; Z: <b>${mi.crd.z.toFixed(2)}</b>`;*/
    label.position.copy(mi.crd);
    /*label.element.animate([
      {width: "0px", height: "0px", marginTop: "0px", marginLeft: "0px"},
      {width: "230px", height: "50px", marginTop: "-25px", marginLeft: "120px"}
    ],{
      duration: 250
    });*/
    label.element.classList.remove("hidden");
  }
  
})

I've tried chaning the position to absolute and the height to 348px but the widget doesnt display I think its related to the iframe element which is the element im displaying, on the iframe website the background is set to transparent but here it is set to transparent.