Trying to add responsive to an iframe embedded into a page (Cross domain)

NOTE: The embedded iframe is a contact form.

I am trying to make the embedded iframe responsive in a contact page. This would be a cross browser iframe.

What I did was I went to edit page, inserted the iframe code:

<div id="embed-container">
<iframe src="https://other-domain.com/contact-us.html" height="650" width="500" frameborder="0" scrolling="no"></iframe>
</div>

CSS:

#embed-container {
	border: 1px dashed red;
	position: relative;
	padding-bottom: 65.25%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
}
#embed-container iframe, #embed-container object, #embed-container embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

The container is responsive but the iframe is not. Have any one done this before? If so, can you please assist me?

Thanks,
Hal