iframe으로 삽입한 동영상을 모바일 기기에서 비율에 맞게 표시되도록 설정하기(CSS)

YouTube 등의 동영상을 iframe 형태로 삽입할 경우 일부 워드프레스 테마에서는 비율에 맞게 제대로 표시하지 못하는 경우가 있습니다. 가령 다음과 같은 코드를 삽입하는 경우:

<iframe width="560" height="315" src="https://www.youtube.com/embed/V3UB54eA2S4" frameborder="0" allowfullscreen></iframe>

이 경우 iframe 바깥에 div를 하나 추가합니다.

<div class="videowrapper">
<iframe width="560" height="315" src="https://www.youtube.com/embed/V3UB54eA2S4" frameborder="0" allowfullscreen></iframe>
</div>

이제 아래와 비슷한 CSS 코드를 사용하여 iframe 내의 동영상을 반응형으로 작동하도록 만들 수 있습니다. (워드프레스에서는 CSS 코드를 스타일시트 파일에 추가해야 합니다.)

.videowrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 비율인 경우 */
/* padding-bottom값은 4:3 비율인 경우 75%로 설정합니다 */
padding-top: 25px;
height: 0;
}

.videowrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

YouTube의 경우 이 글을 참고해 보시기 바랍니다.



기부를 통해 이 블로그를 후원하실 수 있습니다.
워드프레스 설치/제작/문제해결이 필요한 경우 서비스(유료)를 요청해주세요.