YouTube header background Bootstrap

Hey all,

I'm trying to ad a YouTube video header to my site (this is now a self-hosted file).
I tried to use this: http://codepen.io/ccrch/pen/GgPLVW, and the result can be seen here.
It works wonderfully, but it is not responsive. How do I add autoresize?
Thanks.

------
EDIT:

The above has been solved. Now there's a next issue.
I added a YouTube video header to my site.
This is the code:

Code:

---

    <div style="max-width:100%;margin:0 auto;">
      <div style="position: relative;padding-bottom: 56.25%; height: 0; overflow: hidden;">
        <iframe frameborder="0" allowfullscreen="" mute=true src="http://www.youtube.com/embed/MVqAA9_7gR4??showinfo=0&autoplay=1" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; max-width: 100%; max-height: 100%;"></iframe>
      </div>
    </div>

---

I would like to be able to mute and unmute this YouTube video, as there are more videos on the site.
How is that possible, please?
Thanks.

------
EDIT:
Resolved