I am trying to make a responsive iframe, it kind of works for width by setting width=100%, but doing so for height causes this: http://imgur.com/6pZJUb7
Iframe is placed inside
<div class="w3-half w3-center">
I assume that you want to maintain some sort of aspect ratio in your iframe.
Percentages only work in heights if there is a definite height set of the parent element.
The viewport-height (vh) and viewport-width (vw) work very well for making responsive elements because they don't need any container heights to be set, but they can look very different depending on the display.
Something like this will give you a responsive 4:3 aspect ratio:
Adjust the values to suit your needs.