웹솔루션개발 25년 노하우! 해피CGI의 모든것

웹페이지를 제작하다보면 유튜브 영상을 삽입할때가 있습니다. 경우에 따라 썸네일을 보여주고 영상을 링크하는 경우도 있습니다. 이때 해당 유튜브 영상의 썸네일을 가져오는 방법에 대해 안내해 드립니다. 아래 영상의 썸네일을 가져온다고 할때 https://www.youtube.com/watch?v=ARTkK9h5nsI ARTkK9h5nsI 부분이 영상의 고유ID 값입니다. 해당값을 아래 처럼 이미지 주소에 삽입합니다. ARTkK9h5nsI/0.jpg"> 위와 같이 할경우 이미지의 상하에 검은색 여백이 생기고 이미지의 비율도 맞지않습니다. 이미지 경로에 파일명을 변경하여 다른 썸네일을 불러올 수 있습니다. 0.jpg"> 기본 이미지의 상하에 검은색 여백이 생깁니다. mqdefault.jpg"> 검은색 여백이 삭제..

YT Player는 YouTube 동영상을 위한 빠르고 최소한의 동영상 플레이어 웹 앱입니다. JavaScript(jQuery)로 작성되었으며 사용자가 모달 팝업 에서 YouTube 비디오를 재생할 수 있습니다 . 입력 필드에 Youtube 비디오 URL을 입력한 다음 재생 버튼을 클릭하세요. 또한 반응형이므로 데스크톱 컴퓨터에서 휴대폰, 태블릿에 이르기까지 모든 장치에 맞게 크기가 자동으로 조정됩니다. 다운로드 받은 파일의 압축을 해제한뒤에, index.html 파일을 웹브라우저로 열어보면 확인이 가능합니다. 유투브에서 동영상을 공유하기 위한 URL을 복사해서, 위 입력박스에 입력한뒤에 play 버튼을 눌러주면 확인이 가능합니다. 반응형이어서 창 크기에 따라서 동영상이 재생되는 모달창의 크기가 변경이 ..

웹페이지에 표시되는 링크를 클릭하면 모달이 화면에 표시되고, 모달내에서 Youtube, Vimeo, Facebook 의 동영상을 재생할 수 있는 간단한 스크립트 입니다. 다운로드 받은 파일의 압축을 해제한뒤 test/index.html 파일을 웹브라우저로 열어보면 확인이 가능합니다. 데모 페이지상에서는 버튼이 3개가 있고, 각 버튼을 눌러보면 버튼을 눌러보면 모달화면이 열리면서 동영상이 재생이 됩니다. index.html 파일의 소스코드를 열어서 보면, 버튼3개에 대한 HTML태그가 확인이 가능합니다. 데모 페이지 자체에 버튼만 덜렁 있는 상태라 소스코드는 아래의 그림과 같이 단순하게 되어 있습니다. data-video-id='문자열' 을 이용해서 재생하고 싶은 동영상을 지정할 수 있습니다. 문자열은 유..

YouTube 동영상을 표지 배경으로 삽입 가능한 가볍고 간단한 jQuery 플러그인입니다. 해당 플러그인은 YouTube 동영상 임베딩 API를 사용하여 동영상을 가져와 웹 페이지 (또는 특정 div) 배경으로 재생합니다. HTML5 데이터 속성에 비디오 URL을 추가하기 만하면이 플러그인이 해당 비디오를 배경으로 자동 설정합니다. 모든 크기 및 기간으로 비디오를 추가 할 수 있으며 사용 가능한 화면 크기로 크기가 조정됩니다. 그리고 배경 비디오는 반복 재생됩니다. 라이센스는 MIT Licence 입니다. Youtube 영상을 가져와서 보여주려면 사용하는 도메인은 SSL 보안인증서가 장착된 HTTPS 도메인에서만 사용 가능 합니다. 사용법 안내 입니다. /* optional css fade in ani..

상단 소스다운로드를 이용하시거나 아래 URL에서 다운받으실 수 있습니다. https://code.google.com/archive/p/jquery-tubular/downloads 유투브영상을 출력할 페이지에 스크립트 소스 3줄을 추가합니다. div 영역에 id 값 wrapper 값으로 적용을 합니다. 그 후 /js 폴더의 index.js 파일에 출력할 영상 ID 값을 적용하시면 됩니다. var options = { videoId: 'youtubeID값', start: 3 }; youtubeID값 은 youtube 사이트에서 재생화면으로 접속을 한 후 URL이나 소스공유하기시에 적용된 ID 값을 사용하시면 됩니다. ※ youtube 고유ID값이 abcd123 이라면 var options = { videoI..