En primer lugar, soy nuevo aquí y realmente hice todo lo posible para deshacerme del problema X/Y. Estoy tratando de mostrar algún tipo de texto de carga debajo de una inserción de YouTube. Esto es lo que he intentado hasta ahora.
$(document).ready(function() { $('#song1').hover(function() { $(this).html('rickroll <p id="song1load" style="position: absolute">Loading...</p><iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>') $(this).animate({ maxHeight: '344px', height: '344px' }) }, function() { $(this).html('rickroll') $(this).animate({ maxHeight: '30px', height: '30px' }) }) }) body { background-color: grey; color: white; } .video { background-color: white; max-width: 560px; width: 560px; max-height: 30px; height: 30px; border-radius: 10px; color: lightgrey; text-align: center; font-family: Koulen; margin: auto; margin-bottom: 100px; overflow: hidden; } <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <link rel="stylesheet" href="Resources/stylesheet.css"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Koulen&display=swap" rel="stylesheet"> </head> <body> <div class="video" id="song1">rickroll<p id="song1load"></p></div> </body> </html>No creo que stackoverflow pueda cargar yt incrustado en fragmentos, pero espero que entiendas mi punto. ¡Estoy abierto a cualquier solución!