유튜브 동영상 테스트

Darling you
내 두려움 속 희망은 너
Darling you
기나긴 여정의 끝에
영원한 건 없다고 온 세상이 말해도
Darling darling you
내겐 너뿐이야

---

마셜님의 영상이 스크롤 밖으로 나가면 고정하기 기능을 블로그에 추가해서 적용해봤다. 아래는 블로그 하단 내비게이션 버튼을 고려해서 고정된 영상 위치를 수정한 CSS이다.

CSS

.video-post.sticked {
  position: fixed;
  bottom: 44px;
  left: 16px;
  width: 405px;
  z-index: 1051;
}

모바일 화면에서도 적용되면 좋겠지만 모바일 환경에서는 영상이 전체 화면으로 재생되기 때문에 불필요한 것도 있고, 좁은 가로폭으로 화면 대부분을 가려서 일정 폭 이하에서는 보이지 않도록 display: none; 속성을 줬다.

개인적으로 이 기능은 정말 마음에 든다. 하지만 한 가지 아쉬운 점이라면 유튜브 앱과 같이 모바일에서도 가장자리 아래에 고정되어 재생이 되는 동시에 스크롤이 된다면 더 좋을 것 같다.

해결됨

https://uulog.tistory.com/411