Embed code - height of iframe is too less

Hi,

I need help with a piece of HTML embed code…
My website is https://keerthiseasydish.in
In the home page, i need to put the URL for latest youtube video. I am doing it with the following code:
<iframe style="overflow: hidden; width: 100%;" src="YouTube" allowfullscreen="" frameborder="0"></iframe>

This adjusts the width to width of the screen/block, but not the height… video height is limited to the block height.
How can i ensure the height can be adapted to maintain a 16:9 aspect ratio?

Thanks,
Navin

PS: the forum bars me from posting, saying “*** Forbidden. Your IP belongs to a high spam risk network. ***” To work around this, i have to VPN into my office network. Can something be done about this?

Hi there
Hope you are having a good day and thank you for your question :slight_smile:
I’m afraid I cannot think of a CSS option to enforce the aspect ration for your embeds, you would need to be a little bit specific on the width for the embeds.
Kindly have a look at the following guidelines on the same.
https://web.archive.org/web/20130415231312/http://support.google.com/youtube/bin/answer.py?hl=en&answer=178264
Thanks!
Colorlib Support Team

Thanks Mike for your response.
Is there a way to dynamically increase the height of the block? 'coz it looks like the iframe height limits itself to the height of the block

Hi there

Hope you are having a good day and thank you for your question :slight_smile:

Unfortunately, I’m afraid no, at the moment, I’m not aware of any way to dynamically adjust the size of the video embed.

Apologies for the inconvenience.

Thanks!
Colorlib Support Team