반응 형 디자인을위한 iframe 크기 조정 CSS 전용

많은 사이트에 Youtube 비디오가 내장되어 있습니다. Youtube는 휴대 전화에서 작동합니다. 반응 형 디자인이 문제가 될 경우 Youtube 동영상이 포함 된 iframe의 경우 왜 안되나요?반응 형 디자인을위한 iframe 크기 조정 CSS 전용

일을 검색 한 후 (내가 HTML/CSS를 처음 사용하는 경우) 문제에 대한 명확하고 간단한 해결책을 찾지 못했습니다. iframe 너비를 쉽게 조절할 수 있지만 높이를 유지하려면 javascript, jQuery 및 php라는 청크를 웹 디자인에서 초보자에게 모두 알려야합니다. 너비가 어떻게 변하는 지에 관계없이 항상 특정 가로 세로 비율을 유지하기 위해 iframe의 높이를 조정하는 간단한 방법이 필요했습니다.

이 질문에 답하지 않으려면 아래 방법을 따르십시오. 다음은 iframe의 초기 설정입니다.

<iframe src="//www.youtube.com/embed/example_url" frameborder="0" allowfullscreen="allowfullscreen"></iframe>

그게 전부입니다.

누군가 다른 해결책이 있는지 궁금합니다.

출처

2014-01-10 user1576628

중복 가능성 [응답 폭 유튜브 비디오 수축 (http://stackoverflow.com/questions/15844500/shrink-a-youtube-video-to-responsive-width)도 참조 – Blazemonger

[this post] (http://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php) – Blazemonger

이제는 내가 필요할 때 찾지 못한 것에 대해 어리 석습니다. – user1576628

해결 방법은 중첩 된 div입니다. 약간의 해키, 알아,하지만 너무 많은 솔루션을 가진 문제에 대한 정말 쉬운 솔루션입니다. Youtube 비디오는이 예제에서 종횡비 16 : 9를 유지합니다. 귀하의 HTML은 다음과 같아야합니다

<div id="outer"> 
    <div id="inner"> 
     <iframe src="//www.youtube.com/embed/example_url" frameborder="0" allowfullscreen="allowfullscreen"></iframe> 
    </div> 
</div>

그리고 스타일 시트 :

#outer{ 
max-width: 640px; 
max-height: 360px; 
width: 100%; 
height: 100%; 
} 

#inner{ 
    height: 0px; 
    padding-bottom: 56.25%; 
} 

#inner iframe{ 
    width: 100%; 
    height: 100%; 
}

외부 사업부는 최대 높이와 너비를 설정하고 규모 자체를 할 수 있습니다를 내부 사업부가 일치하도록 패딩 속성을 사용하면서 포함 div (나는 꽤 확신)의 너비 높이. 값은 너비와 높이의 비율 인 (height*100/width)%으로 설정해야합니다. 그러면 iframe이 div를 포함하는 전체 내용을 채우기 위해 늘어납니다. 공백 문자가 웹에 채워 지므로 텍스트를 잘 배치해야합니다.

정확히 어디에서 찾았는지 기억이 안납니다. Stack Overflow의 다른 곳에서 이미지로 처리되었지만 삽입 된 Youtube 비디오가 너무 일반적이므로 iframe에서 작동하도록 설정하는 것이 적절하다고 생각합니다.

의

Here's a JSfiddle with the working thing.

출처

2014-01-10 21:08:30 user1576628

상대 위치를 갖도록 내부 구획을 설정하고 iframe이 작동하도록 절대 위치를 가져야합니다. 또한 위쪽 및 아래쪽에 여백을 추가하고 왼쪽 및 오른쪽에 자동으로 외부 구역을 추가하면 가운데 구역이됩니다. –

반응 형 디자인을위한 iframe 크기 조정 CSS 전용

답변

관련 문제