How can I make the song start at the exact same time as the loading screen?

I'm trying to have the song start at the exact same time as the loading screen, but there's a like one-second-long delay.

Here's my code snippet for the loading screen:

<style>

body:before {

  content: " ";

  height: 100vh;

  width: 100vw;

  display: block;

  position: fixed;

  top: 0;

  left: 0;

  z-index: 100;

  background-image: url('https://media4.giphy.com/media/v1.Y2lkPTc5MGI3NjExdWpzeHJvZGhjMXVzenlzaW02NmtueXozOTg1bjV5dHA1YXp3dmltYSZlcD12MV9pbnRlcm5naWZfYnlfaWQmY3Q9Zw/r5tMmtRwwuzyaw9hpG/giphy.gif');

  background-size: cover;

  background-repeat: no-repeat;

  background-position: center;

  animation: yourAnimation 30s ease 1 normal forwards;

  pointer-events: none;

}

@keyframes yourAnimation {

  0% {

    opacity: 1;

  }

  98% {

    opacity: 1;

  }

  100% {

    opacity: 0;

  }

}

</style>

Here's my code snippet for the music:

<iframe id="background-music" width="0" height="0" src="https://www.youtube.com/embed/FaTa-wJIWZ0?autoplay=1&loop=1&playlist=FaTa-wJIWZ0&controls=0&mute=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen="">

</iframe>