Responsive in-built slideshare iframe in wordpress needed

I have added slideshare code:

<iframe src="//" 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?

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

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.

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%.

1 Like
<div class="frame-box">


.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%;

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.