외부동영상연결

완료
키워드
일반적으로 글쓰기하실 때 웹에디터를 이용해 간단하게 외부 동영상(예: Youtube)을 링크시킬 수있는 기능을 말합니다.
CH2CH에서 제공해드리는 웹에디터는 두가지 입니다. 네이버(Naver.com)의 개발자 사이트에서 제공하는 SmartEditer2.0 과 Froala Editor입니다.
한국유저들이 SmartEditor에 익숙하지만 기능은 Froala Editor가 훨씬 사용하기 편합니다. 에디터 선택은 해당 도움말을 참고해주세요.



1. Youtube, Vimeo에서 외부 동영상 연결 코드 얻기


Youtube  ( https://www.youtube.com/)

1) 원하시는 비디오 하단에 보면 공유(Share) 링크가 있습니다. 


2) 링크(Link) URL은 아래 주소를 복사하시면 되고, 임베드코드는 퍼가기 버튼을 클릭하시면 됩니다. 


3) 퍼가기를 클릭하시면 관련 옵션을 체크하시고, 복사를 클릭하시면 임베드 코드가 복사가 됩니다. 



Viemo (https://vimeo.com)

1) 원하시는 비디오에 마우스를 올리시면 공유 링크가 나타납니다. 


2)클릭하시면 아래와 같이 공유링크 정보가 나타납니다. 

SmartEditor를 사용하실 경우에는 임베딩(Embeding) 코드가 필요하고, Froala 에디터일경우에는 링크(Link) 코드가 필요합니다. 




2. SmartEditor에서 외부동영상를 넣는 방법 


SamartEditor에서는 Link로는 동영상이 들어가지 않고 반드시 임베드코드(Embed Code)로 넣어야합니다. 

설명에서는 위의 Vimeo 임베드 코드를 사용합니다. 

글을 작성하시고, 동영상을 넣을 장소에 아래와 같이 표시를 해둡니다. HTML코드가 익숙하지 않으시면 코드보기에서 위치를 찾기가 쉽지 않기때문입니다. 

그리고 하단에 있는 HTML 탭을 클릭합니다. 


HTML코드에서 [동영상]이라고 표시해둔 부분을 찾으셔서 삭제하시고, 해당 자리에 복사된 동영상 코드를 붙어 넣습니다. 


글쓰기 완료를 클릭하시면 아래와 같이 나타납니다. 



3. Froala 에디터에서 외부동영상을 넣는 방법


Froala 에디터는 SmartEditor보다 훨씬 간편하게 넣습니다.

위 동영상에서 Link 주소만 복사를 합니다. 


에디터의 동영상 링크를 클릭하셔서 아래와 같이 복사를 하고 삽입을 클릭합니다. 


게시판 내용에 아래와 같이 바로 삽입이 되며 동영상을 클릭할 경우 옵션 박스가 나타나며 다양한 스타일로 조정을 할 수 있습니다.





도움이 되셨습니까?