Estoy editando un sitio web y reproduciendo un video para este sitio web en la página de inicio. El video que reproduzco comienza como reproducción automática y hay un botón en el video que usa zIndex. Cuando se activa este botón, la etiqueta de video actual se convierte en una línea de comentario y el otro video se activa. Utilicé la codificación javascript y html para esto. El problema es que cuando se desplaza hacia arriba y hacia abajo en la parte del sitio web donde se ven estos videos, se producen tartamudeos. Parece una imagen de caída de FPS. ¿Qué puedo hacer al respecto, qué puedo optimizar? Trabajo en wordpress y agrego este código como raw js a la página. *El resto de la página funciona normalmente cuando el cuadro de video está fuera de la vista de la ventana.

Cuando me desplazo hacia abajo, todo es fluido, pero cuando subo y veo un poco el video, aquí viene el retraso *

Aquí está mi código:

 <div class="video-wrap"> <button style=" font-family: 'Font Proxima Nova Regular'; font-size: 13px; font-weight: bold; font-stretch: normal; font-style: normal; letter-spacing: 1.5px!important; color: #fff; background-color: #E21C90FF; border-color: #E21C90FF; border-radius: 10px; position: absolute; z-index: 1; top: 78%; right: 38%; "> HOW PROGRAM WORKS? </button> <span></span> <video id="video1" style="position: relative; left: -13px; border-radius: 10px;" autoplay="autoplay" loop="loop" muted="" width="575" height="324"><source src="video1.mp4" type="video/mp4" /> </video> <!--<video onloadstart="this.volume=0.25" controls id="video2" style="position: relative; left: -13px; border-radius: 10px;" loop="loop" autoplay="autoplay" width="575" height="324"><source src="video2.mp4" type="video/mp4" /> </video>--> </div> <script> jQuery(function () { var videos = jQuery(".video-wrap"); videos.on("click", function () { var elm = jQuery(this), conts = elm.contents(), le = conts.length, ifr = null; for (var i = 0; i < le; i++) { if (conts[i].nodeType == 8) ifr = conts[i].textContent; } elm.addClass("player").html(ifr); elm.off("click"); }); }); </script>