Although #Steemit has very flat and clean UI which gives great user experience but I have found small UI defect on Steemit. It seems small but in user perceptive it's not odd. It gives bad user experience.  

In my last post [Crypto Podcast Bulletin: Today's top 5 Crypto currency news to listen](https://steemit.com/bitcoin/@techstack/crypto-podcast-bulletin-today-s-top-5-crypto-currency-news-to-listen) I had used embedded code  to show the audio player which includes iframe and it had fixed ```height='166'``` but due to fixed ```height='100%'``` in CSS class ```.Markdown div.videoWrapper iframe ``` the audio player not rendering correctly.

Here is following screen shot with default CSS class style:
![New Project (2).jpg](https://steemitimages.com/DQmP16GBEHNLnvCs4mo3F8q4PnTNjdK73u5Q9C8NwzgQkLt/New%20Project%20(2).jpg)

If I changed the ```iframe``` height to 166 in the console it still didn't change the height because of fixed ```height='100%'``` in ```.Markdown div.videoWrapper iframe ``` which is forcing element to render 100% height. See below screen shot:

![New Project (7).jpg](https://steemitimages.com/DQmULzbbaZvG2zSxFSktAENR88AhGWSkyjW47RZLpsEp8V3/New%20Project%20(7).jpg)

Now if I remove ```height='100%'``` in CSS class ```.Markdown div.videoWrapper iframe ``` it fixes the issue. See screen shot below:

 ![New Project (4).jpg](https://steemitimages.com/DQmW9bkaTNc5fqJjVN62ueJap2CJpdH8SBzBznScWd4XPw2/New%20Project%20(4).jpg)

It should not use ```height='100%'``` always. Some it depend on situations but you should always test in various scenarios.

I hope some one will notice this and correct it.

<hr />

![footer-post-main.jpg](https://steemitimages.com/DQmRB94AnVWZzzL7AhgxxkPaCNdm4njyVWM1qBiqcZWMzJp/footer-post-main.jpg)