부트스트랩 동영상 배경

이 블로그 첫 페이지에서 사용하고 있는 동영상 배경 소스가 있는 곳을 적으려고 합니다. 동영상은 아래에 보는 유튜브 동영상으로 이 글을 발행하는 지금 송곳 드라마 동영상이지만 어떤 때는 다른 동영상이 나옵니다. HTML5 video 태그도 익스플로러 10 이상에서 지원하니 제 생각엔 익스플로러 10 이상만 지원할 것 같습니다. 그리고 스마트폰에서는 배경이 안 나옵니다. 태블릿에서 보지 않았지만 스마트폰에서 안 나오니 태블릿에도 나오지 않을 것 같습니다. 그래서 저는 익스플로러 9 이하에서는 첫 페이지를 안 나오게 했고 스마트폰에서는 아래에서 적었지만 감추었습니다.

그 코드는 http://bootsnipp.com/snippets/featured/ful-screen-video-background에서 찾을 수 있습니다. 부트스트랩(Bootstrap)을 사용하니 그것도 사용하지 않으면서 안 된다고 하지 마세요. 유튜브 동영상은 로딩이 느리다는 것은 거의 알 것입니다. 참고로 원본 코드에 대한 페이지는 영어입니다. 

그 코드의 좋은 점이 MP4 가 아니고 유튜브 동영상을 사용할 수 있다는 점입니다. 참고로 HTML5에서는 MP4, WebM, Ogg을 얘기하는 것 같더라고요. 참고로 HTML5의 video 태그에 대해서는 http://www.w3schools.com/html/html5_video.asp를 보세요. 참고로 첫 페이지에서 사용하고 있는 동영상은 위 음소거된 동영상입니다.

아래는 코드의 일부로 아래 그림을 보면서 설명합니다. 초록색 사각형인 videoURL에 빨간색 사각형인 동영상 주소를 넣으면 됩니다. 만약 유명 가수의 유튜브 동영상이 있다면 브라우저에 나타난 주소를 videoURL에 삽입하면 됩니다.  배경에서 소리는 안 나고 광고가 있어도 광고가 안 나오고 단지 영상만 나옵니다. 동영상에 로딩이 늦으면 로딩 화면이 나오더라고요. 가끔 짜증납니다.

 

저는 원본 코드와 약간 다르게 했습니다. 원본 코드를 어떻게 티스토리에 붙이는지에 대한 설명이 아닙니다. 그것을 바란다면 읽지 않아도 됩니다.

전에 동영상 배경이 다른 스마트폰에서는 모르겠는데 제 스마트폰에 안 나와 스마트폰과 태블릿에 안 나오게 했었습니다. 2015/11/03 - 부트스트랩,요소 감추기에서 부트스트랩에서 스마트폰과 태블릿에 감추는 것은 hidden-xs와 hidden-sm을 사용한다고 했습니다. 그래서 저는 아래 그림과 같이 했습니다. 참고로 익스플로러 9이하에서는 티에디션이 있는 첫 페이지가 안 보입니다. 제가 익스플로러 9이하에서는 카테고리로 이동하게 했거든요. 

스크립트의 경우 저는 아래와 같이 했습니다. 원본 코드와 다른 것입니다. 원본 코드에 있던 다른 곳에 있는 스크립트 파일인 jquery.mb.YTPlayer.js를 내 티스토리에 올렸습니다. 왜냐하면 그 사이트가 서비스 중지 등 잘 못 될 수 있으니까요. 그리고 그 파일을 아래 그림을 보듯이 jquery와 부트스트랩 스크립트 아래에 삽입했습니다. 참고로 부트스트랩 버전은 아래 그림에 나왔듯 3.3.4이고 jQuery 버전은 1.11.0입니다. 이런 버전에 따라서도 안 될 수도 있습니다.