iframe와 스펀지를 대응하는 방법

가끔 유튜브 영상을 끼워넣고 싶은 경우도 있겠죠.
하지만 그것이 스펀지 사건이라면 단순히 아이프람만 넣으면 지면이 조금 변형된다.예를 들면 아래의 느낌.

출처는 다음과 같습니다.
sample01.html

<div class="movieWraper">
            <div class="iframeWrap">
                <iframe width="100%" height="100%" src="https://www.youtube.com/embed/PcUVtC-f8RY" frameborder="0" allowfullscreen></iframe>
            </div>
        </div>

sample01.css

.movieWraper {
    width: 100%;
}

.iframeWrap{
    width: 100%;
}

너비가 100%인 경우에도 높이가 고정되어 가로로 변경됩니다.

해결책

이 해결책으로.
• iframe에 position:absolute 지정
・.iframe Wrap 높이를 제거하고 padding으로 높이를 결정합니다.
이 정도면 됐어.
출처는 다음과 같습니다.(}변경 사항 없음)
sample02.css

.movieWraper {
    position: relative
    width: calc(100% - 10px);
    margin: 0 auto;
}

.iframeWrap{
    height: 0;
    padding-bottom: 62.5%;
}

iframe {
    position: absolute;
    top: 0;
    left: 0;
}

.iframe Wrap에서 지정한 width와padding-bottom(padding-top일 수도 있음)은 해당하는 감각이 좋은 파라미터를 설정하십시오.

2016/11/18 스포츠투데이

여러분이 평론한 바와 같이padding-bottom(padding-top)은 애니메이션의 비율을 이용하여 9/16=0.55625→56.25(%)를 사용하면 딱 좋습니다.
지적해 주셔서 감사합니다.

총결산

어려운 일은 절대 하지 않지만, 잊기 쉬운 꼼꼼한 방법을 잊어버려 필기를 했다.
이상.