[HTML&CSS] 반응형으로 동영상 삽입하기

스펙

각 기기마다 기존 youtube의 너비, 높이 비율대로 유지한 채로? 노출되어야 하고, 모바일 화면을 PC에서 확인했을시 브라우저 창 Resizing할 시, 영상도 함께 리사이징되어야 함.

문제점

초기 로딩했을시에 height지정을 해주지 않으면 납작하게 노출되거나, 아래 (알수 없는)빈 공간도 생겨서 안없어짐.

해결

영상 삽입에 관련해서 구글링해본 뒤, 해결.

전체 소스 코드 확인 가능.

<div class="pop_area pop_video">
    <div class="pop_wrap" style="top:100px">
        <div class="video_wrapper">
            <iframe id="player" type="text/html" width="100%" height="100%" src="https://www.youtube.com/embed/8IuHBixDP2k" frameborder="0"></iframe>
        </div>
    </div>
</div>

height을 지정해주면, 창의 크기가 변경될 때마다 영상의 크기도 함께 변경되지만, 아래와 같이 위아래 검정색 공백?이 생긴다.

.pop_video .pop_wrap .video_wrapper{
    position:relative; 
    height:500px;
    overflow:hidden;
    max-width:100%;
}

그래서,

.pop_video .pop_wrap .video_wrapper{
    position: relative; 
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    max-width: 100%;
}
/*
[56.25%] 
wide화면은 가로, 세로 비율이 16:9이므로,  9 / 16 = 0.5625 = 56.25%

[75%] 
표준 비율의 동영상이라면, 4:3이므로,  3/4 = 0.75로 75%
*/

참고

위의 방법을 사용하니 따로 height을 지정하지 않아도 영상 비율에 맞게 노출 된다.