YouTube header background Bootstrap

[chechu]

Hey all,

I'm trying to ad a YouTube video header to my site (http://www.brunomazereel.com) (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 (http://brunomazereel.com/test.html).
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 (http://brunomazereel.com/test6.html).
This is the 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