I'm trying to align to make some custom ''video player'' thingy based around two iframes acting as double buffers and an overlay that will allow users to perform custom actions, similar to Coursera's modal questions.

All this will be exposed later through and uri that will be used in an external iframe (yea, i know)

The issue i'm facing is that i need the overlay to always match the video inside the iframes but the iframes themselves seem to be bigger than the actual video. For example, by assigning width: 100% to the iframes i manage to get a consistent result accessing this component through another iframe (the one that will be used in the website).

Current html structure using VueJs

  <div id="action-player">

      <!-- Interactive layer -->
      <div class="a-overlay-layer">
        <slot name="overlay-layer"></slot>
      </div>

      <!-- iFrame double buffer -->
      <div class="a-iframe-layer">
        <div id="buffer0" :class="['a-frame-buffer', { 'a-frame-buffer__active': bufferState.active === 0 }]"></div>
        <div id="buffer1" :class="['a-frame-buffer', { 'a_frame-buffer__active': bufferState.active === 1 }]"></div>
      </div>
  </div>

Both buffers are being instanced by vimeo player. Currently in the slot for the overlay i just have a background:red element covering the screen;insira o código aqui

.a_player {
  position: relative;
  width: 100%;
  height: 100%;

  // padding-top: 56.25%; // //Aspect ratio 16:9
}
.a-overlay-layer {
  position: absolute;
  display: block;
  float: right;
  height: 100%;
  width: 100%;
  z-index: 2147483647;
  pointer-events: none;
  // background: transparent;
}
.a-iframe-layer {
  position: relative;
  width: 100%;
  height: 100%;
}
.a-frame-buffer {
  position: absolute;
  z-index: 99;
  display: block;
  height: 100%;
  width: 100%;
  // vimeo iframe
  iframe {
    height: 100%;
    width: 100%;
  }
}
.a-frame-buffer__active {
  z-index: 100 !important;
  animation: smoothTransition 0.425s linear 0s 1 normal both;
}

The double buffer works fine, i just need to find a way to keep the overlay matching the video size not the whole iframe, which i thin, i defaulting to the whole screen cause of width: 100%.

Appreciate the help! o/