참고: 인기 워드프레스 테마인 아바다X 테마, BE 테마가 39달러, Jupiter가 35달러로 할인 중입니다.

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