Estoy tratando de alinearme para crear un "reproductor de video" personalizado basado en dos iframes que actúan como búferes dobles y una superposición que permitirá a los usuarios realizar acciones personalizadas, similares a las preguntas modales de Coursera.

Todo esto se expondrá más adelante a través de un uri que se usará en un iframe externo (sí, lo sé)

El problema al que me enfrento es que necesito que la superposición coincida siempre con el video dentro de los iframes, pero los iframes en sí mismos parecen ser más grandes que el video real. Por ejemplo, al asignar width: 100% a los iframes, logro obtener un resultado consistente al acceder a este componente a través de otro iframe (el que se usará en el sitio web).

Estructura html actual usando 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>

Ambos buffers están siendo instanciados por vimeo player . Actualmente, en la ranura para la superposición, solo tengo un background:red que cubre la pantalla; insira o código aquí

 .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; }

El doble búfer funciona bien, solo necesito encontrar una manera de mantener la superposición que coincida con el tamaño del video, no con todo el iframe, que adelgazo, por defecto a toda la pantalla debido al width: 100% .

¡Agradezco la ayuda! o/