• 반응형 홈페이지에 맞추어 출력되는 동영상 삽입하기

    Advanced Responsive Video Embedder 라는 플러그인은 유튜브나 Vimeo 동영상 삽입을 위한 플러그인입니다. 예제 보기 : http://makebct.cafe24.com/?p=188 1. 유튜브 공유-소스코드로 동영상 삽입하기 기존 유튜브의 ‘공유’ 기능을 통해 아래와 같은 코드를 본문에 작성하여 동영상을 삽입해 왔습니다.

    2. Advanced Responsive Video Embedder 플러그인으로 동영상 삽입하기 [새 글 쓰기]를 클릭하여 글 작성창에 보면 아래와 같이 ‘Advanced Responsive Video Embedder’ 플러그인의 [Embed Video]라는 버튼이 보입니다. 동영상을 삽입할 위치에 커서를 위치시킨 후, [Embed Video] 버튼을 클릭하면 다음과 같은 동영상 삽입 창이 보여지고, 다음 그림에 보이는 것과 같이 원하시는 동영상의 주소를 입력하고 나머지 항목을 입력합니다. 동영상이 있는 페이지의 웹주소창의 주소를 입력해도 되고, 공유에서 지원하는 짧은 주소를 입력해도 됩니다. 3. 동영상 출력 위의 두 가지 방법으로 동영상을 본문에 삽입하였을 경우 아래의 그림과 같이 별 차이가 없어 보입니다. 하지만 모바일 환경에서 보면 다릅니다. 유튜브의 ‘공유’ 코드를 이용해 삽입된 동영상의 경우 세로 […]

  • 유튜브 동영상의 섬네일 자동 출력 방법

    유튜브 동영상은 이미지가 아니기 대문에 글 작성 시 특성 이미지 등록이 되지 않습니다. 그래서 섬네일이 필요한 곳에서 섬네일을 출력할 수 없어 사이트가 너무 밋밋하다고 불평하는 클라이언트가 많습니다. 그리고 유튜브 동영상이 포함된 글에서 섬네일을 출력하려면 어떻게 해야 되는지 문의하곤 합니다. 원하는 섬네일이 출력되도록 하려면 섬네일 사이즈에 맞는 이미지를 특성 이미지에 올려야 합니다. 하지만 일부 클라이언트는 글 작성할 때마다 동영상 따로 이미지 따로 올리는 작업이 불편하다고 해서 섬네일 퀄러티를 포기하면 유튜브 동영상의 섬네일을 자동으로 만들 수 있는 방법이 있다고 설명합니다. 이와 같은 경우 사용할 수 있는 플러그인으로서 다음과 같은 Video Thumbnails가 있습니다. (1) 플러그인 설치 및 활성화 플러그인 설치 및 활성화 과정은 생략하도록 합니다. (2) 플러그인 설정 특정한 작업을 하지 않는 이상 별도의 설정은 할 필요가 없습니다. (3) 섬네일 작업 플러그인을 활성화하면, 글 페이지에 Video Thumbnail 메타 박스가 추가됩니다. 글에 유튜브 동영상이 임베드되어 […]

  • 워드프레스 글 또는 페이지에 동영상 추가 방법

    최근에는 동영상을 웹사이트에 직접 올리지 않고 이를 유튜브 또는 Vimeo와 같은 동영상 공유 사이트에 올리고 그 링크를 자신의 워드프레스 사이트에 임베드해서 사용하는 것이 일반적입니다. 워드프레스가 4.x대로 버전업이 되면서 유뷰브나 Vimeo와 같은 공유 플랫폼의 콘텐츠를 워드프레스로 임베드하는 과정이 좀 더 진화되어 이제는 동영상 링크를 추가하면 에디터가 알아서 동영상으로 변환해 주는 단계로까지 발전했습니다. (1) 유튜브 동영상 유튜브 동영상을 워드프레스 에디터에 임베드 할 때 필요한 유튜브 링크는 다음과 같습니다. 위 링크를 다음과 같이 워드프레스의 에디터에 입력합니다. 글을 공개한 다음, 사용자 화면에서 이 글을 본 결과는 다음과 같습니다. 유튜브 동영상이 올바르게 추가된 것을 볼 수 있습니다. 북극海• (주)블로그코디 대표 • 워드프레스 교육 서비스 런칭 • 워드프레스 정보 공유 커뮤니티 make BCT 런칭 • 한국형 워드프레스 테마 출시 • 워드프레스 홈페이지 제작 서비스 런칭 http://blogcodi.com

  • 동영상 섬네일 자동 추출 플러그인: Video Thumbnails

    Video Thumbnails은 유튜브에 올린 동영상의 섬네일을 자동으로 추출할 수 있는 워드프레스 플러그인입니다. 워드프레스 글 작성 시 이미지 없이 동영상만 업로드 할 경우 다음과 같이 섬네일 출력이 필요한 카테고리에 섬네일이 없어 텍스트만 출력되어 밋밋할 때가 있습니다. 이와 같은 상황에서 Video Thumbnails 플러그인을 설치하면 자동으로 특성 이미지를 추출할 수 있습니다. 단, 아무래도 동영상의 섬네일을 추출하다보니 추출된 섬네일의 퀄러티는 높지 않다는 것이 좀 아쉽긴 합니다. Video Thumbnails 워드프레스 플러그인의 설치 및 활성화 과정은 생략하고, 이 플러그인을 활성화 화면 워드프레스 글 작성 페이지에 다음과 같은 Video Thumbnails 메타 박스가 추가 됩니다. 위 그림에서 Search Agagin 링크를 누르면 잠시 후 다음과 같이 섬네일이 추출되는 것을 볼 수 있습니다. 편집 글을 저장하면 다음과 같이 카테고리 템플릿 페이지에서 섬네일이 출력되는 것을 볼 수 있습니다. Video Thumbnais […]

위로이동