Video is stretching in the IFrame rather than maintaining aspect ratio

[abdullahqureshi1994]

Describe the issue While embedding media CMS video via IFrame the video is stretched and not completely visible in the IFrame as youtube video does.

To Reproduce Steps to reproduce the issue:

1. Go to any video and copy the embed code
2. Remove the iframe width and height attributes and pass the below CSS

   <style> iframe {
   width: 100% !important;
   height: 500px !important;
   }</style>

3. You can see that the bottom part of the video is cutting and not complete video is not visible.

Expected behavior Please apply the same style on Youtube IFrame embeded video It looks like this with the same CSS style

The play Button Should also be in center

Screenshots Actual Video Link: https://demo.mediacms.io/view?m=OhvfraJOk Iframe embeded screenshot with issue:

[abdullahqureshi1994]

The style with 50% top padding in _common.css generated file is the root cause of this above issue. @mgogoulos Can you please fix this issue by examining all of its consequences?

.video-js.vjs-mediacms {
    padding-top: 50%;
}

Looks good when the top padding is zero px.

[cdorsat]

I found that too, should fix it.