[워드프레스] 모바일 기기에서 유튜브 동영상이 잘리지 않고 표시되도록 하기

워드프레스(WordPress)에서 YouTube 동영상을 삽입하면 데스크톱(PC)에서는 제대로 나오지만 모바일 기기에서는 화면이 전체가 나오지 않고 일부만 잘려서 표시됩니다. 이 경우 CSS 코드를 통해 유튜브 동영상을 반응형으로 작동하도록 하여, 모바일 기기에서 화면 크기에 맞게 동영상 너비가 조정되도록 할 수 있습니다.

우선 다음과 같은 CSS 코드를 워드프레스 테마의 스타일시트 파일(style.css)에 추가하도록 합니다. (또는, 테마 디자인(버전에 따라 '외모') > 사용자 정의하기 > 추가 CSS에 추가해도 됩니다.)

.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

.entry-content img,
.entry-content iframe,
.entry-content object,
.entry-content embed {
max-width: 100%;
}

 

이제 개별 글에서 YouTube 동영상을 삽입할 때 다음과 같이 <div class="video-container>... </div> 코드를 YouTube 소스 코드를 둘러싸도록 해야 합니다.

 

삽입하고자 하는 동영상 삽입 코드는 YouTube 동영상에서 공유 > 소스 코드를 클릭하여 해당 코드를 복사하도록 합니다.

예를 들어, 공유를 원하는 유튜브 동영상 페이지에서 다음과 같이 iframe 코드를 복사합니다.

 

 

그리고 워드프레스 대시보드의 글 편집(혹은 글 쓰기) 화면에서 "비주얼"과 "텍스트" 모드 중에서 "텍스트" 모드를 선택한 후에 복사한 코드를 붙여넣기 합니다.

 

<div class="video-container"><iframe width="560" height="315" src="https://www.youtube.com/embed/3wKfRKwyaJ0" frameborder="0" allowfullscreen></iframe></div>

그러면 모바일 기기에서도 화면 크기에 상관 없이 문제 없이 유튜브 동영상이 표시됩니다.

참고로 Vimeo 동영상도 위와 같은 형식으로 하면 될 것 같습니다(테스트는 안 해 봤음). 만약 잘 안 된다면 이 글에 소개된 HTML 코드를 삽입하면 비메오 동영상이 모바일 기기에서도 잘리지 않고 표시될 것입니다.

* 이 방법은 워드프레스뿐만 아니라 티스토리 등 다른 플랫폼에서도 반응형으로 유튜브와 비메오 영상을 삽입할 때 활용이 가능합니다.