Add html inside draggable div css box

I have this code to generate a /draggable/ css box:

<div id="container">
  <div id="box">
<style>
#box {
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: #ccc;
}
</style>
<script>
window.onload = function() {
  // find the element that you want to drag.
  var box = document.getElementById('box');
  /* listen to the touchMove event,
  every time it fires, grab the location
  of touch and assign it to box */
  box.addEventListener('touchmove', function(e) {
    // grab the location of touch
    var touchLocation = e.targetTouches[0];
    // assign box new coordinates based on the touch.
    box.style.left = touchLocation.pageX + 'px';
    box.style.top = touchLocation.pageY + 'px';
  })
  /* record the position of the touch
  when released using touchend event.
  This will be the drop position. */
  box.addEventListener('touchend', function(e) {
    // current box position.
    var x = parseInt(box.style.left);
    var y = parseInt(box.style.top);
  })
}
</script>

I would like to add an html code

<iframe src="https://alceawisteria.codeberg.page/Diarykeepers_Homepage/stash/webamp.html" frameBorder="no" width=500px height=250></iframe>

into the draggable box.

(but putting it inside the ‘box div’ will just not render it.)
Is there anything I need to heed specifically to make this work ?