부트 스트랩 응답 iframe 크기가 조정되지 않음

부트 스트랩 프레임 워크를 사용하여 반응 형 웹 페이지를 개발 중이며 반응 형 iframe을 넣고 싶습니다. 부트 스트랩 응답 iframe 크기가 조정되지 않음

부트 스트랩 문서

제가

<div class="embed-responsive embed-responsive-16by9"> 
    <iframe class="embed-responsive-item" src="…"></iframe> 
</div>

및합니다 (bootstrap.css 포함)는 CSS를 결과는이다

.embed-responsive 
{ 
display: block; 
height: 0; 
overflow: hidden; 
position: relative; 
} 

.embed-responsive.embed-responsive-16by9 
{ 
padding-bottom: 56.25% 
} 

.embed-responsive .embed-responsive-item, .embed-responsive iframe, .embed-responsive embed, .embed-responsive object 
{ 
border: 0 none; 
bottom: 0; 
height: 100%; 
left: 0; 
position: absolute; 
top: 0; 
width: 100%; 
}

된다 이용한 반응 16x9 등 종횡비 iframe을 넣을 수 있다고 iframe의 컨테이너 (클래스가 "embed-responsive ..."인 div)가 응답합니다. 해상도에 따라 올바른 너비와 높이를 사용합니다. 그러나 크기가 조정되지 않았으므로 iframe이 오버플로됩니다.

div를 정확하게 채우기 위해 iframe의 크기를 조정하려면 어떻게해야합니까?

출처

2014-07-17 Josecanalla

어떤 브라우저가 사용됩니까? – BuddhistBeast

나는 파이어 폭스에서 테스트, 나는 크로스 브라우저가되고 싶다 – Josecanalla

이 문제도 발생했습니다. 다소 해킹 해법을 찾았습니다. iframe이 소스가 응답하지 않기 때문에 내 높이 고정 된 값을 설정했다

<iframe class="embed-responsive-item" src="…" width="100%"></iframe>

: iframe이 섹션에서 다음과 같이 width:100%은 그래서 보일 것입니다.

희망이 있습니다.

출처

2014-09-25 15:39:48 spasticninja

또한, 나는 최신 버전의 부트 스트랩이 문제를 해결했다고 생각한다. – spasticninja

고객이 특수 마크 업이나 컨테이너를 추가하지 않고도 사이트의 모든 위치에 삽입 된 비디오를 추가하기를 원했습니다. 이 jQuery 함수는 페이지의 모든 iframe을 반응 적으로 만들어 CSS를 변경하지 않고도 비디오를 처리합니다. 기본 종횡비는 16 : 9이지만 4 : 3 비디오를 사용하거나 자신의 종횡비를 추가하려는 경우 종횡비를 변경할 수 있습니다 (전화기로 만든 세로 비디오 컨텐트를 아는 경우).

https://gist.github.com/dylanvalade/b2ba4eaa99ae7968cfd8

출처

2015-09-09 16:48:52

당신은 이것에 대한 부트 스트랩 사용할 수 있지만, 그것은 당신이 정말 당신을 도와 어떤 프레임 워크를 필요로하지 않는 등의 간단한 작업입니다. 체크 아웃 Responsive Iframes; 그것은 어떤 프레임 워크도 사용하지 않고 있으며 네이티브 javascript로 작성됩니다.

출처

2016-07-31 02:35:57

부트 스트랩 응답 iframe 크기가 조정되지 않음

답변

관련 문제