모달에 유튜브 동영상이 나오게,부트스트랩

2016/07/07 - 부트스트랩에서 풍선도움말, 툴팁에서 부트스트랩 풍선 도움말이라 할 수 있는 모달(modal)에 대해 다루었습니다. 여기에서 다루고자 하는 것은 모달에 유튜브 동영상이 재생되도록 하는 것에 대해 설명하겠습니다.  미리보기는 아래에서 볼 수 있습니다. 아래 그림을 클릭하면 모달이라는 것 안에서 유튜브 동영상이 나오고 재생하면 모달 안에서 동영상이 재생됩니다. 참고로  이 블로그에서 모달에 동영상이 나오는 대표적인 곳은 http://min-blog.tistory.com/media입니다.  

 

부트스트랩 모달의 기초를 배운 사람은 같은 원리일 것이라 생각할 수 있습니다. 제가 알기로 부트스트랩 모달은 텍스트만 가능한 것으로 압니다. 위는 소스가 있어야 합니다. 부트스트랩 기반으로 다시 CSS와 스크립트를 적용해야 합니다. 부트스트랩 기본만 이용하고서는 위와 같은 것을 구현하지 못합니다. 

참고로 동영상에 재생 버튼이 나오게 하는 것은 2016/02/02 - 썸네일 사진에 재생 버튼 만들기에서 설명했으며 반응형에서 유트뷰가 반응형이 되게 하는 것은 2016/03/10 - bootstrap,유튜브를 반응형으로에서 설명했습니다. 그리고 위처럼 유튜브 동영상에서 썸네일을 가져오는 것은 2015/08/25 - 유튜브 동영상, 썸네일 가져오기에서 다루었습니다.

위에서는 유튜브 동영상만 모달에 재생하는 것이었는데 제가 소스를 구한 곳의 미리보기를 보면 사진, 비메오 동영상 등 다양한 것은 모달에서 보여줍니다. 소스 다운로드는 https://github.com/ashleydw/lightbox로 이동한 후 아래 그림을 보듯이 Clone or Download를 클릭한 후 Download ZIP 버튼을 눌러 받으면 됩니다. 참고로 그 페이지는 영어입니다. 그리고 미리보기 페이지는 http://ashleydw.github.io/lightbox/입니다. 

1. 동영상이라고 모든 동영상이 가능한 것이 아닙니다. 가능한 동영상은 유튜브 비메오 등인데 인스타그램은 어떻게 하는지 모르겠습니다. 거기에 인스타그램도 나왔거든요.  외국 사람이 네이버 TV캐스트,다음TV팟 등 한국의 동영상에 대해 알 리가...현재 부트스트랩 모달은 텍스트만 안에 보입니다.

2. 부트스트랩에도 CSS나 자바스크립트가 있지만 모달에 사진 및 동영상이 나오도록 하기 위해서는 추가로 CSS나 자바스크립트(JS)가 필요하다는 것을 알았을 것입니다. 

- 추가로 CSS와 JS(스크립트)가 필요해! -