First of all, I'm new here, and I really tried my best to get rid of the X/Y problem. I am trying to display some sort of loading text under a youtube embed. This is what I have tried so far.
$(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>I don't think stackoverflow can load yt embeds in snippets, but you hopefully get my point. I'm open to any solutions!