동영상의 iframe 높이 조정하기

Question

TinyMCE을 내 WYSIWYG 텍스트 편집기로 사용하고 있기 때문에 태그가없는 iframe이 생성됩니다. 내가 온라인으로 가지고있는 솔루션은 특정 태그로 iframe을 조정하기 위해 jQuery를 사용하지만 페이지의 모든 iframe을 어떻게 조정할 수 있습니까? 나는 CSS를 사용하여 width: 100%에 대한 시도했지만 제대로 작동하지만 height: auto 추가하면 해당하는 조정하지 않습니다.

태그가없는 iframe이 자동으로 높이를 페이지의 너비에 맞게 조정할 수 있도록하려면 어떻게해야합니까?

Answer 1

CSS로 지정할 수있는 방법이 없으며 iframe을 절대 높이로 변환해야합니다 (iframe의 내용은 iframe의 크기로 조정됩니다.).

HTML : 무엇을 내장하고하는 것은 당신이 내장하고있는 비디오의 가로 세로 비율이 일정한 점에서, 상대적으로 예측 가능한 경우

그러나, 여기에 iframe에 대한 래퍼 div를 사용하여 대안이다

<div class='video-wrapper'> 
    <iframe ...></iframe> 
</div> 

CSS

.video-wrapper { 
    position: relative; 
    height: 0; 
    padding-bottom: 56.25%; 
} 

.video-wrapper iframe { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    top: 0; 
    left: 0; 
} 

래퍼 div의 padding-bottom 속성에 가로 세로 비율을 연결하면 수식 : video_height/video_width * 100으로 계산됩니다. 예를 들어, 너비가 9/16 * 100 = 56.25% 인 16 : 9 종횡비의 비디오.

이제 까다로운 부분은 TinyMCE에서 래퍼 <div>을 얻는 중입니다. 기본 HTML을 편집하지 않으면 불가능할 수도 있습니다. 다른 대안은 jQuery를 사용하여 div 안에 모든 iframe을 래핑하는 것입니다.

$('iframe').wrap('<div class="video-wrapper"></div>'); 

희망이 있습니다.