동영상 배경 나오는 것을 해결했다.

예전부터 이 블로그에 동영상 배경을 써 왔는데 공기계 LG GK가 생겨 그것으로 제 블로그를 봤습니다. 그런데 무엇이 문제인지 몰라도 페이지가 검정으로 나와 글씨가 안 보였습니다. 더 자세히 동영상 배경을 위한 CSS를 보고 싶었으나 그냥 배경을 나오지 않겠다는 생각을 했습니다. 제가 HTML 기초가 부족해서 문제가 많이 발생합니다. 제 PC와 스마트폰에서는 문제가 없었는데...다른 스마트폰에서는....

 

현재 이 블로그에서 보이는 동영상 배경처럼 티스토리에 동영상 배경을 만드는 것은 http://osxtip.tistory.com/444를 보면 나와 있습니다. 거기를 보면 나와 있는데 쉽습니다. 동영상 배경을 설정하는 법을 더 쉽게 설정하던 곳이 있었는데 이젠 그곳이 사라졌네요. 참고로 저는 아래 그림 및 더보기 안에 나온 소스를 사용했습니다.

아래 그림은 CSS와 HTML 소스입니다.

 

#background_list {

    position: fixed;

    top: 50%;

    left: 50%;

    min-width: 100%;

    min-height: 100%;

    width: auto;

    height: auto;

    z-index: -100;

    -webkit-transform: translateX(-50%) translateY(-50%);

    transform: translateX(-50%) translateY(-50%);

}

이 글을 모바일로 보고 있다면 동영상 배경을 보이지 않습니다. 동영상 배경은 PC에서 보입니다. 제가 동영상 배경이 모바일에서 사라지게 설정했거든요. 여담으로 네이버 앱(어플)에서는 동영상 배경이 보였습니다.

 

저의 해결은 스마트폰 등 모바일에서 동영상 배경이 안 나오니 아예 나오지 않게 처리하는 것이었습니다. 이 블로그는 부트스트랩을 사용하고 있으니 아래 그림과 같이 hidden-sm과 hidden-xs를 써 태블릿과 스마트폰에서 동영상 배경이 나오게 한 video 태그를 숨기게 한 것입니다. 그러니 해결됐습니다. 부트스트랩을 알고 있다면 hidden-sm나 hidden-xs를 알 것입니다. 부트스트랩을 공부하면 알아야 합니다.

 

 

아래 그림은 w3schools.com에 나온 video 태그의 브라우저 지원입니다. 지원하는 브라우저를 보면 PC 브라우저 기준으로 하며 안드로이드 브라우저 등 모바일 관련 브라우저는 없네요. 아래 그림 왼쪽부터 크롬,파이어폭스,익스플로러,사파리,오페라입니다. 전에 다루었듯이 상업적으로 무료 동영상은 http://pixabay.com/에서 얻을 수 있다고요. 저도 지금 보는 동영상도 거기에서 구했습니다.