주로 블로그에 대해 설명하는데 이 블로그가 티스토리라 다른 블로그보다 티스토리에 대한 내용이 많습니다. 그리고 제가 티스토리를 하는 입장에서 글을 적었으니 객관성 등 여러 면에서 문제가 있을 것입니다. 또한 최대한 쉽게 적으려고 노력하겠는데 쉽지 않을 것이니 이해 바랍니다

예전에 동영상 배경에 대해 설명이 잘 됐던 다른 사람 글이 안 보여 제가 이 블로그에 사용한 동영상 배경에 대해 설명하려고 합니다. 나중에 누가 물어볼 것 같은 예감이...방명록에 가끔 멋있다고 하거든요.


자세히 설명할 정도 많이 아는 것도 없으니 이 블로그에서 어떻게 했는지만 적겠습니다. 제한이 있는 네이버, 다음 등의 블로그에는 적용할 수 없으니 헛고생하지 마세요. 해보지 않았지만 경험상 네이버 블로그는 여기에서 사용하는 video 태그에 대한 제한을 있을 것 같습니다. 저는 네이버 블로그에서 HTML, CSS 등을 별로 해보지 않거든요. 왜냐하면 2009 년에 제한을 충분히 겪었거든요.

HTML 이 블로그 방명록에 어떻게 사용했는지 적겠습니다. 여기에 보이는 동영상 배경은 로딩 속도 때문에 며칠 후 제거할 것 같아서요. 그리고 방명록에 설정한 동영상 배경은 그대로 둘 예정이거든요.


티스토리에서 방명록 치환자는 <s_guest>~</s_guest> 이며 방명록에 관계된 것은 이것 안에 대부분이 들어갑니다. 그래서 아래 소스를 방명록이 시작되는 <s_guest> 아래에 삽입했습니다. HTML5의 비디오 태그에 대해 적고 싶지만 제가 정확히 아는 것이 없어 자세히 적지 못하고 간단히 적자면 익스플로러 9이상에서 지원하니 익스플로러 8이하에서는 안 보입니다. 그리고 아래에서 적지만 모바일에서도 안 보입니다. 예전에 본 것 같은데 네이버 앱으로 봤더니 보였나... 


<video autoplay="" loop="" muted="" poster="http://cfile5.uf.tistory.com/original/25191156D8E2160AE5C" id="background_guestbook">

    <source src="http://min-blog.tistory.com/attachment/cfile3.uf@233409495EA34B82346B7.mp4" type="video/mp4">

</video>

위 소스에서 id 이름을 위 그대로 해도 되고 아무 이름으로 정하며 poster에 동영상이 나오기 전에 나올 이미지를 설정합니다. 중요한 동영상 배경은 MP3가 아닌 MP4로 src에 입력합니다. 저는 이미지나 동영상은 http://pixabay.com/에서 구했습니다. 


위 소스를 그대로 붙이면 저와 같은 파일은 나타나지 않습니다. 왜냐하면 파일 이름을 변경했거든요. 그리고 티스토리에서 파일의 주소를 얻는 법 알 것입니다. 간단히 적자면 크롬(chrome)에서 이미지나 음악 파일을 에디터에 있는 파일로 올린 후 MP4나 이미지를 마우스 오른쪽 버튼으로 선택 후 각각 링크 주소 복사와 이미지 주소 복사를 하면 됩니다. 


CSS HTML은 위와 같고  CSS를 설정해야 하는데 아래와 같이 하여 HTML/CSS 편집에 있는 CSS에 넣든지 합니다. 저의 경우는 HTML에 <style>~</style>을 만든 후 그 안에 넣은 후 <s_guest>아래에 삽입했거든요. <style>~</style>은 html에 넣는다는 것은 알 것이입니다. 그리고 이것이 없으면 CSS에 넣는 것입니다. 아래 background_guestbook은 위의 id 명입니다. 만약 위에서 변경했다면 아래도 변경해야 합니다.


#background_guestbook {

    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%);

}

모바일에서 동영상 배경 처리 video 태그는 PC가 아닌 모바일 브라우저에서 나타나지 않아 아래 그림을 보듯이 video 태그에 class="hidden-sm hidden-xs"를 추가하여 스마트폰과 태블릿PC에서 나타나지 않게 했습니다. 전에도 말했듯 class="hidden-sm hidden-xs"는 부트스트랩(Boostrap)에 사용하는 것입니다. 부트스트랩이 아닌 경우는 미디어쿼리를 이용해야 할 것입니다. 아래 그림은 위 과정을 한 장의 그림으로 나타낸 것입니다. 



다른 동영상 배경을 보고 싶다면 http://min-blog.tistory.com/tag를 보면 됩니다. 위와 같은데 id, poster, src만 변경하여 동영상 배경을 만든 것이 있습니다. 그 페이지를 보면 어떤 분은 짜증날 것입니다. 저도 가끔 짜증납니다. 유튜브 동영상에 동영상 배경, 태그가 전부 나오니... 동영상 배경을 쓰면 멌있지만 느리다는 단점이 있다는 것을 알았으면 합니다.  


신고
  1. BlogIcon 이카루스 2016.05.31 11:29 신고  댓글주소  수정/삭제  댓글쓰기

    전에도 보았는데 아무리봐도 멋있어요..^^
    이런 소스 덕분에 많는 분들이 도움이 될 듯 합니다..!!

    • BlogIcon 백전백승 2016.05.31 12:51 신고  댓글주소  수정/삭제

      멋있을 것입니다. 방명록에 글을 적는 사람 대부분이 멋있다고 하더라고요. 그리고 이 글을 쓸 당시 멋있어서 처음과 글에도 적용했는데 속도 때문에 짜증나더라고요.

  2. 2017.09.13 04:35  댓글주소  수정/삭제  댓글쓰기

    비밀댓글입니다

    • BlogIcon 백전백승 2017.09.13 10:27 신고  댓글주소  수정/삭제

      동영상 배경 소스를 인덱스 페이지를 치환자에 넣으면 됩니다. 그러면 인덱스 페이지에만 나타납니다. 인덱스 페이지일 때만 표시되는 영역입니다. 티스토리의 인덱스 치환자는 *를 뺀 <*s_index_article_rep> ... </s_index_article_rep*>입니다.

      참고로 티스토리 치환자는 티스토리 홈페이지 >TISTORY GUIDE > 스킨가이드 > 치환자를 보시면 됩니다. 저의 블로그 방명록을 보면 거기에만 동영상 배경이 보입니다. 그것과 같은 이치입니다. 그것은 방명록 치환자에 동영상 배경 소스를 넣었습니다.

  3. 2017.09.13 14:17  댓글주소  수정/삭제  댓글쓰기

    비밀댓글입니다

    • BlogIcon 백전백승 2017.09.13 16:17 신고  댓글주소  수정/삭제

      1. 홈에도 동영상 배경이 뜰 것이라 생각을 못 했네요. 목록 치환자인 <s_list*>~</s_list>에 제대로 삽입했는데, 홈에도 나타나는 이유는 저도 모르겠습니다.

      2. 카테고리에 동영상 배경을 주었기 때문에 말씀대로 카테고리인 data나 project에도 나타나는 것은 당연합니다.
      방금 생각났는데 메뉴는 카테고리만 되는 것이 아니라 검색이나 태그도 됩니다. 태그 메뉴는 tag가 들어가니 동영상 배경이 나오지 않습니다. 제 블로그 태그 메뉴를 보면 알 것 입니다. 그러면 글작성시 태그 작성을 잘 해야 될 것입니다.

  4. 2017.09.14 00:00  댓글주소  수정/삭제  댓글쓰기

    비밀댓글입니다

  5. 2017.09.14 01:04  댓글주소  수정/삭제  댓글쓰기

    비밀댓글입니다