How do I remove this unnecessary spacing within my iframe?

Question

I currently have an iframe that is the embedded code for a Wistia video. The problem is, when I go to my website to embed the video, the video shows up looking like this in every mobile browser:

Do note, I have confirmed that it is the video that is causing the spacing, not the text below the video. How do I remove this unnecessary gap? Here is the video's embedded code:

<script src="https://fast.wistia.com/embed/medias/6m7jisefgh.jsonp" async></script><script src="https://fast.wistia.com/assets/external/E-v1.js" async></script><div class="wistia_responsive_padding" style="padding:56.25% 0 0 0;position:relative;"><div class="wistia_responsive_wrapper" style="height:100%;left:0;position:absolute;top:0;width:100%;"><div class="wistia_embed wistia_async_6m7jisefgh videoFoam=true" style="height:100%;width:100%">&nbsp;</div></div></div>

score 0 · Answer 1 · edited May 23 '17 at 12:02

If that is an external URL you are calling for the IFrame, I would not suggest manipulating its DOM. You should rather consider adding height / max-height attributes to that IFrame in order to workaround the issue.

If you must, you could try writing javascript to change the DOM of the IFrame. For instance, you may find extra margin on the video element, and through javascript you may change that to a lower value. Here's one way you could do that: https://stackoverflow.com/a/1451455/5894241

score 0 · Answer 2 · answered May 11 '17 at 03:39

0

I used the code you provided and made some changes. So, please try using the modified version of your code as follows:

<script src="https://fast.wistia.com/embed/medias/6m7jisefgh.jsonp" async></script>
<script src="https://fast.wistia.com/assets/external/E-v1.js" async></script>
<div class="wistia_responsive_padding" style="">
    <div class="wistia_responsive_wrapper" style="width:100%;">
        <div class="wistia_embed wistia_async_6m7jisefgh videoFoam=true" style="width:100%"></div>
    </div>
</div>

Hope it helps!

answered May 11 '17 at 03:39

nishkaush

1,512
1
13
20

For some reason, I'm still getting a gap of space when I pull it up in a mobile web browser. – Wizard7611 May 11 '17 at 03:52
Could you please give me your full code including the lines which have the text. Thanks. – nishkaush May 11 '17 at 03:59
Sure thing! I have two blocks of code. The first block(the embedded video): https://pastebin.com/fWMMy22U – Wizard7611 May 11 '17 at 04:05
When I look at the file in my mobile browser, I don't see any gap. Please visit the following link to checkout what I am seeing - http://www.nishant-kaushish.com/experiment/ – nishkaush May 11 '17 at 04:25
Error 404, please fix that. – Wizard7611 May 11 '17 at 14:03
Are you there?? – Wizard7611 May 11 '17 at 18:26

How do I remove this unnecessary spacing within my iframe?

2 Answers2