He creado un efecto de desplazamiento que funciona en esta imagen, reproduciendo un video en bucle y mostrando una superposición de texto cuando se desplaza sobre ella. Hay un pequeño pequeño problema con esto. El video es un poco más pequeño que la imagen base, lo que significa que hay pequeños espacios entre ellos cuando se pasa el mouse sobre la imagen y se reproduce el video. No puedo entender por qué, ya que el css para la superposición de video/texto está en ancho: 100%. Si alguien puede ver lo que me estoy perdiendo, agradecería mucho la entrada. ¡Gracias! (

También vale la pena mencionar que este código se escribió en el editor de código de CARGO.site (una plataforma de creación de sitios). {Imagen 4} está en el lugar de lo que normalmente sería una etiqueta html img. El Javascript puede no ser relevante, pero lo incluiré de todos modos por motivos de claridad.

Un enlace al sitio exacto en el que estoy trabajando: https://racerpictures.cargo.site/work

 <div class="container-1" gid="13"> <a href="https://racerpictures.cargo.site/easy-life-beeswax" class="image-link-1"> <div class="image-1" gid="1"> <div class="overlay-img-1"> <video id="video-1" autoplay="" loop="" class=""> <source src="https://files.cargocollective.com/c1549988/A002_C018_0922BW_002.mp4" type="video/mp4"> </video> <div class="text-1"><h4>EASY LIFE | BEESWAX<br></h4> <p class="caption-small-1">MUSIC VIDEO</p> </div> </div> <div class="base-img-1"> {image 4} </div> </div> </a> </div>

 #video-1 { display: block; width: 100%; height: 100%; fit-content: inherit; } .container-1 { position: relative; width: 100%; margin-bottom: 5px; } .image-1 { display: block; width: 100%; height: inherit; } .overlay-img-1 { position: absolute; top: 0%; bottom: 0; left: 0; right: 0; height: 98.5%; width: 100%; opacity: 0; transition: .5s ease; background-color: rgba(0, 0, 0, 0.4); } .overlay-img-1:hover { opacity: 1; } .text-1 { width: 100%; color: white; font-size: 20px; position: absolute; top: 60%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); text-align: center; }

 <script> $(document).ready(function() { $('.video-1').each(function(el){ var _this = $(this); _this.on('mouseover', function(ev) { _this[0].src += "&autoplay=1"; ev.preventDefault(); }); }); }); </script>