내 iframe 내에서 불필요한 간격을 제거하려면 어떻게해야합니까?

Question

현재 Wistia 비디오의 임베디드 코드 인 iframe이 있습니다. 내가 비디오를 포함하는 내 웹 사이트를 방문 할 때 문제가있다, 비디오는 모든 모바일 브라우저에서이처럼 보이는 나타납니다 :

이

메모를 수행, 나는 그것이 원인이되는 비디오가 있음을 확인했다 간격은 동영상 아래의 텍스트가 아니라 텍스트입니다. 이 불필요한 간격을 제거하려면 어떻게합니까? 여기에 비디오의 임베디드 코드 : 그건 당신이 IFrame을 요구하고있다 외부 URL 인 경우

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

Answer 1

, 나는 그것의 DOM을 조작 제안하지 않을 것입니다. 이 문제를 해결하려면 height/max-height 속성을 해당 IFrame에 추가하는 것이 좋습니다.

iframe의 DOM을 변경하려면 자바 스크립트를 써야합니다. 예를 들어 동영상 요소에 여분의 여백이있을 수 있으며 자바 스크립트를 통해 더 낮은 값으로 변경할 수 있습니다. 다음과 같이 할 수있는 방법이 있습니다. https://stackoverflow.com/a/1451455/5894241

Answer 2

제공 한 코드를 사용하고 일부 변경했습니다. 수정 된 코드 버전을 다음과 같이 사용하십시오.

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

희망이 있습니다.