Draggable image on top of an iframe [VUE]

Question

Basically what I need is to display an image that can be moved freely over an iframe. I have achieved this with some js and css, but the problem now is that when I scroll, the iframe content moves accordingly, but the image remains on its position on the screen, and I'd like for it to move along with the iframe's content kind of as if it where part of it.

I have tried capturing the scroll event from the iframe, but with it being cross-origin I haven't succeeded.

I've also tried getting its whole height in order to make the image container higher and scrollable too, but this made the iframe not scrollable.

As a third option, I tried aswell to append the image to the iframe, but again, it's cross-origin so, even though I'm not sure 100%, I don't think that's possible.

This is my code so far:

<template>
    <div class="general-container">
        <div class="general-container__iframe">
            <div class="iframe-container">
                <vue-friendly-iframe class="iframe-component" :src="iframeUrl"/>
            </div>
        </div>
        <div class="general-container__banner">
            <img :src="imageUrl" ref="draggable" class="draggable" @mousedown="dragMouseDown">
        </div>
    </div>
</template>

<script>
export default {
    name: "BannerPreview",
    data() {
        return {
            positions: {
                clientX: undefined,
                clientY: undefined,
                movementX: 0,
                movementY: 0
            },
        }
    },
    methods: {
        dragMouseDown(event) {
            event.preventDefault();
            this.positions.clientX = event.clientX;
            this.positions.clientY = event.clientY;
            document.onmousemove = this.elementDrag;
            document.onmouseup = this.closeDragElement;
        },
        elementDrag(event) {
            event.preventDefault();
            this.positions.movementX = this.positions.clientX - event.clientX;
            this.positions.movementY = this.positions.clientY - event.clientY;
            this.positions.clientX = event.clientX;
            this.positions.clientY = event.clientY;

            this.$refs.draggable.style.top = (this.$refs.draggable.offsetTop - this.positions.movementY) + 'px';
            this.$refs.draggable.style.left = (this.$refs.draggable.offsetLeft - this.positions.movementX) + 'px';
        },
        closeDragElement() {
            document.onmouseup = null;
            document.onmousemove = null;
        },
    },
    props: {
        imageUrl: {
            type: String,
            required: false
        },
        iframeUrl: {
            type: String,
            required: false
        }
    }
}
</script>

And this is the corresponding styling:

.iframe-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  .iframe-component {
    iframe {
      width: 100vw;
      height: 100vh;
    }
  }
}

.general-container {
  position: relative;

  &__iframe,
  &__banner {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }

  &__banner {
    z-index: 10;
  }
}

.draggable {
  cursor: move;
  position: absolute;
  user-select: none;
}