点击嵌入自定义动画缩略图叠加的 YouTube 视频时出现小故障

// Used with the YouTube videos which have thumbnail images to start the video
function playButtonClicked(playButton) {
    // Get reference to the youtube video iFrame
    let video = playButton.nextElementSibling;

    // Start the video
    video.setAttribute("src", video.getAttribute("src") + "&autoplay=1");

    // Hide the thumbmnail and play button icon
    let thumbnail = playButton.previousElementSibling;
    thumbnail.style.visibility = "hidden";
    playButton.style.visibility = "hidden";
}

var video = document.querySelector(".small_video_container");
var aspectRatio = Number(video.getAttribute("data-aspectRatio"));
var height = video.getBoundingClientRect().width / aspectRatio;
video.getBoundingClientRect().height = height;
video.style.height = height + "px";

.small_video_container {
    height: 100%;
    width: 100%;
}

.video {
    height: 100% !important;
    width: 100% !important;
    display: block;
}

.video-thumbnail {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    height: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer;
}

<div class="small_video_container" align="center" data-aspectRatio="1.7777">
    <img class="video-thumbnail" src="https://www.staging7.midstory.org/wp-content/uploads/2023/03/animated-background.gif" alt="Video Thumbnail">
    <img class="play-button" onclick="playButtonClicked(this)" src="https://www.staging7.midstory.org/wp-content/uploads/2023/03/play-icon.png" alt="Play Video">
    <iframe class="video" loading="lazy" src="https://www.youtube.com/embed/nfDkietqdPY?showinfo=0&controls=0&autohide=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>