Responsive in-built slideshare iframe in wordpress needed

[denisshpak8989]

I have added slideshare code:

<iframe src="//www.slideshare.net/slideshow/embed_code/key/HQoiz6GR1oLe1n" width="860" height="600" frameborder="600" marginwidth="0" marginheight="0" scrolling="no" style="border:1px solid #CCC; border-width:1px; margin-bottom:5px; max-width: 100%;" allowfullscreen> </iframe> 

To my website: here

But there are black area around presentation at mobile version:

How to remove this areas?

[SamA74]

That’s not what I’m seeing. The iframe content stays full height and squashes the aspect at narrow sizes.

[WebMachine]

The slideshow is set to a fixed height, but the width changes as the viewport decreases in size, so the slides which stay at a constant aspect ratio fill up less of the fixed height. So that’s why the black gaps at the top and bottom of the slides get larger.

[SamA74]

The usual trick to make an iframe keep aspect is to have a wrapper element for it with vertical padding set to a percentage to represent the aspect ratio. Then have the iframe fill that with both width and height at 100%.

[SamA74]

<div class="frame-box">
    <iframe></iframe>
</div>

with

.frame-box {
    position: relative;
    padding-bottom: 75%; /* adjust to aspect ratio, Eg, 75% = 4:3 */
    overflow: hidden;
}
.frame-box iframe {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
}