How do I mute the audio from an embedded YouTube video?

Question

EDIT: This is not a duplicate because I've tried the method that this post has been flagged for and it hasn't worked with my project.

Example: http://codepen.io/anon/pen/gLOepa

I've been trying to wrap my head around how to mute the embedded YouTube video on my website. I've tried various scripts and methods and nothing I've tried works. Any help would be greatly appreciated.

The HTML embedded link looks like this:

<div class="video-background">
    <div class="video-foreground">
        <iframe src="https://www.youtube.com/embed/UGPuEDyAsU8?controls=0&showinfo=0&rel=0&autoplay=1&loop=1&=HD1080" frameborder="0" allowfullscreen></iframe>
    </div>
</div>

And the CSS method I've used for playing it in the background looks like this:

* { box-sizing: border-box; }
.video-background {
 background: #000;
 position: fixed;
 top: 0; right: 0; bottom: 0; left: 0;
 z-index: -99;
 }

.video-foreground,
.video-background iframe {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 pointer-events: none;
 }

 #vidtop-content {
 top: 0;
 color: #fff;
 }

@media (min-aspect-ratio: 16/9) {
.video-foreground { height: 300%; top: -100%; }
}

@media (max-aspect-ratio: 16/9) {
.video-foreground { width: 300%; left: -100%; }
}

@media all and (max-width: 600px) {
.vid-info { width: 50%; padding: .5rem; }
.vid-info h1 { margin-bottom: .2rem; }
}

@media all and (max-width: 500px) {
.vid-info .acronym { display: none; }
}