게시물에 유튜브(YouTube) 동영상 삽입 시 아래 그림과 같이 가로 100% 확장하여 표시할 수 있습니다. 가로 100% 확장에는 코드 작성이 필요하며, 표시되는 영상은 브라우저 크기에 반응하여 자동으로 크기가 맞춰집니다.

시작에 앞서

만약 게시물 본문 표시 방법이 본문 - 단독 게시물로 설정되어 있는 경우, 이 코드는 동작하지 않습니다. 게시물 본문 표시 방법을 본문 - 그리드 구성에 따름 으로 설정해 주세요. 게시물 본문 표시 방법을 변경하려면 아래 1단계 5번 과정을 참고하시길 바랍니다.

1단계: 게시판 위젯 추가하기

1. 디자인 모드에 접속합니다. 접속방법
2. 게시판을 추가하려는 메뉴를 새로 생성하거나, 기존 메뉴가 있는 경우 이동합니다. 메뉴 추가방법
3. 디자인 모드 왼쪽 상단의 위젯 추가 ＋ 아이콘을 클릭합니다.
4. 게시판 위젯을 클릭합니다. (새로운 게시판이 추가됩니다.)

5. (선택 사항) 게시판 설정을 열어 게시판 디자인 및 설정을 변경합니다. 위젯 설정 열기

   참고: 관리자만 글을 작성할 수 있도록 하려면 게시판 권한 설정하기 도움말을 참고하세요.

   

2단계: 유튜브 가로 100% 확장 코드 복사 및 붙여넣기

1. 게시판 디자인을 완료하면, 왼쪽 상단의 위젯 추가 ＋ 아이콘을 클릭합니다.

2. 코드 위젯을 클릭합니다.

   참고: 코드 위젯은 실제 페이지에는 표시되지 않기 때문에 위치는 어디에 두어도 무방합니다.
3. 코드 위젯 위에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다.
4. 컨텍스트 메뉴가 나오면 코드 설정 을 클릭합니다.

5. 아래의 코드를 복사합니다.

   <style>
   .iwcustom-youtube-video-container {
       position: relative;
       width: 100%;
       height: 0;
       padding-bottom: 56.25%;
   }
   .iwcustom-youtube-video {
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
   }
   </style>
   

6. 위에서 복사한 코드를 붙여넣습니다.

   

7. 저장 버튼을 클릭해 적용합니다.
8. 디자인 모드 오른쪽 상단 게시하기 버튼을 클릭해 적용합니다.

3단계: 게시물 작성 및 동영상 첨부하기

1. 디자인 모드 오른쪽 상단의 미리보기 아이콘을 클릭합니다.
2. 게시판이 나오면 글쓰기 버튼을 클릭합니다.

3. 게시물 제목을 작성하고, 텍스트 편집도구에서 동영상 삽입 아이콘을 클릭합니다.

   

4. 연결할 유튜브 동영상 URL을 입력하고 삽입을 클릭합니다. 유튜브 동영상 주소 가져오기

   

5. 동영상 삽입이 완료되면, 텍스트 편집도구에서 코드보기 아이콘을 클릭합니다.
6. <span> 태그 안의 클래스에 아래 빨간색 처리된 클래스명을 추가로 입력합니다.
   • fr-video fr-deletable fr-fvc fr-dvb fr-draggable iwcustom-youtube-video-container
   • fr-draggable iwcustom-youtube-video

7. 클래스명을 추가하면 게시물 코드뷰에 아래 그림처럼 입력됩니다.

   

8. 텍스트 편집도구에서 코드보기 </> 아이콘을 다시 클릭합니다.
9. 작성 버튼을 클릭해 게시물을 올립니다.
10. 유튜브 동영상이 가로 100% 확장되어 표시되는지 확인합니다.