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의 경우 이 글을 참고해 보시기 바랍니다.

워드프레스와 관련하여 문의사항이 있나요?

워드프레스와 관련하여 문제가 있는 경우 서비스(유료) 문의란을 통해 문제 해결을 요청하실 수 있습니다.

Service Request