YouTube embed mutes by default on load

Question

My plan is to make a YouTube embed as a background music of a website. Here is a code snippet from the HTML file:

    <iframe
      width="1"
      height="1"
      wmode="transparent"
      src="https://www.youtube.com/embed/VIDEO_ID?autoplay=1&loop=1"
      frameborder="0"
      allowfullscreen>
    </iframe>

I tried to load the HTML file over Chrome. Checked "Network" tab on "Inspect Element" and confirmed that YouTube embed is playing the file (bunch of videoplayback files continuously loads on Network tab), so I think the video is muted. Any fixes?

Answer 1

I tried this snippet and tried changing the width and height to 100 to actually see if a video is playing or not. So, the video isn't muted rather, it is not playing. Because Google Chrome has some restrictions over this. The playback controls are more inclined towards the user. So, autoplaying audio won't work. The only way autoplay works is when the video is set to mute=1. So, not really helping the cause.

I tried using some iframe apis but they dont work either.

Your best shot would be downloading the audio from youtube and adding a code like this:

<audio id="bg-music" autoplay loop>
    <source src="background_music.mp3" type="audio/mpeg">
</audio>