Embedding Responsive Iframe Videos in Hueman Theme

Hi there to the Hueman Team.

Before I start the query congrats to the Hueman Team. I am using Hueman Pro & Hueman Free in my websites and this issue is common to both the Pro & Free version.

I am trying to embed an animated video which I had created using Animatron Services on my web page.

In the page, I have marked the embed codes that are used with or without a div container.

Here is the one type of embed code I am trying to use :

<iframe src="https://publish.animatron.io/34201959e2caad5cbc115181?w=640&h=360&a=1&r=1&c=0" width="640" height="360" frameborder="0"></iframe>

After a lot of online searching, here is the video wrapper or div container that I am using:

.video-container {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 0px;
	height: 0;
	overflow: hidden;
}

.video-container iframe,  
.video-container object,  
.video-container embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.video-wrapper {
	width: 600px;
	max-width: 100%;
}

But I am still not able to get the media embed to resize properly as per the screen size.

For reference please have a look at the official Animatron site where they are using the same video that resizes as per the screen size thereby maintaining the look. Have a look here. You will find the responsive embeds towards the bottom half of that page.

I tried this issue in both Human Pro & Free version but could not get it to work. If you can guide me as to how can I get the iframe embeds (mentioned in this question) resize as per the screensize then that will be a great help to embed in the upcoming posts.

Regards
Don