다른 방식으로 유튜브를 동영상 배경으로 사용

 

이 글에서 적고자 하는 것은 보는 배경처럼 유튜브를 사용에 대한 것이다.

 

내가 3년 전에 유튜브를 배경으로 하는 글을 적었는데 잊었다. 우연히 찾았는데 유튜브를 배경으로 하는 글을 적었던 것이었다. 그 글은 아래 글인데 그 글을 변형한 것임을 알았다. 전과 다른 점은 이 글은 아이프레임(iframe) 태그를 사용하지 않고 배경 동영상이 나오기 전에 유튜브에 업로드한 배경 이미지가 나온다는 것이 특징이다.

 

참고로  로딩하는 시간이 느려 움직이는 배경이 늦게 나타난다. 설마 정적인 배경을 설명하려고 한 것이라 생각한 것은 아닐 것이다.

 

 

글에 유튜브동영상배경 넣기

---

다시 적지만 이 글에서 사용할 스크립트는 시작되기 전에 유튜브에 업로드한 배경 이미지가 나오게 하는 것이 특징이다.

 

티스토리 글을 쓰면 유튜브를 동영상 배경이 적용되게 하는 소스를 찾아 해멨다. 내가 찾는 소스는 이 블로그에 글 전체가 아닌 이 글에만 적용되는 소스다. 여기에서 비슷한 것을 찾았는데 거기에서 제공한 소스를 전부 사용하려고 했으나

거기의 유튜브만 제외만 부분만 했다. 왜냐하면 거기 소스에서 유튜브로 사용하려니 유튜브 반복 재생이 안되는 것을 알았다.

 

 

그래서 반복 재생이 가능한 내가 이 블로그 메인에서 사용하는 방식을 사용하기로 했다. 그리고 이 블로그 메인에서 사용하는 방식이 유튜브를 배경으로 사용할 때 편하다. 그것은 아래에서 적었다. 

 

 

아래 그림으로 설명하면 유튜브 소스를 퍼가기 위해 공유 > 퍼가기 > 복사하는 방식보다 간단히 브라우저에서 주소로  유튜브 영상을 퍼오는 방식이 편하다. 이 블로그 메인에서 사용하는 방식은 유튜브 영상 주소는 브라우저에 나타나는 주소만 퍼오면 되니 편하다. 참고로 이 블로그 메인에서 사용하는 방식은 여기에서사용한다.

 

 

따라 하기

 

HTML 소스는 아래와 같은데 왜 div를 두 번 사용하고 <div> 태그에 클래스 이름이 동일하다. 클래스 이름이 동일해서 변경했더니 동영상이 나타나지 않아 그대로 사용했지만 왜 그렇게 되는지 모르겠다. 일단 아래와 같이 사용했다. 

 

<div class="video-background">
    <div class="video-foreground">
         유튜브 아이프레임 소스
      </div>
</div>

 

위에서 적었듯이 위 소스에서 빨간색인 유튜브 아이프레임 소스를 사용하지 않았고 대신에 아래와 같은 소스를 넣었다. 유튜브 아이프레임 소스에 아래 소스를 넣었다.

<div data-youtube="브라우저에 나오는 주소"></div>

 

그리고 관리에 있는 HTML 편집의 CSS에 아래 소스를 삽입했다. 전 경우 작성하는 글에 <style>~</style>을 사용해서 넣었는데 자꾸 없어져 없어지지 않는 CSS에 삽입하는 것이 좋을 것 같다. 

 

.video-background {
  background: #000;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -99;
}
.video-foreground {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

@media (min-aspect-ratio: 16/9) {
  .video-foreground {
    height: 300%;
    top: -100%;
  }---
}
@media (max-aspect-ratio: 16/9) {
  .video-foreground {
    width: 300%;
    left: -100%;
  }
}
@media all and (max-width: 600px) {
  .vid-info {
    width: 50%;
    padding: 0.5rem;
  }
  .vid-info h1 {
    margin-bottom: 0.2rem;
  }
}
@media all and (max-width: 500px) {
  .vid-info .acronym {
    display: none;
  }
}

---

HTML 편집에 삽입한 CSS를 제외한 결과는 아래와 같다. 알고 있듯이 에디터에서 글을 쓰면 쓸데없는 태그가 들어간다. 내가 삽입하지도 않았는데 &nbsp;라는 공백이 들어갔다. 내가 사용한 방법을 적었는데 누군가는 무슨 말인지 전혀 모를 것이다.