[자바스크립트] 영상이 스크롤 밖으로 나가면 고정하기

video-sticker.min.js

영상 등을 글과 함께 포스팅하면, 당연하지만 별다른 작업을 하지 않으면 글을 읽기 시작하면 비디오는 스크롤 영역 밖으로 나가버립니다.

이 스크립트는 글을 읽으면서도 영상이 조그맣게 고정되어 보이도록 해주는 스크립트입니다.

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
.video-posted {
    padding-bottom: 157.5px
}
.video-post.sticked {
    position: fixed;
    bottom: 30px;
    left: 10px;
    width: 280px;
    z-index: 1950
}
.padding-sizer {
    width: 100%
}
cs

video-posted는 body에 추가되는 class입니다.

비디오가 본문의 어떤 요소를 가리는 현상을 방지하기 위하여 body에 padding-bottom값을 추가하는 겁니다. 본인의 상황에 맞게 값을 조절해주세요.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
$(function () {
    var b = $(".video-post");
    if (1 == b.length) {
        $("body").addClass("video-posted"),
        b.after("<div class=\"padding-sizer\"></div><div class=\"video-post-title\"></div>"),
        $(".title, .article_info").appendTo(".video-post-title")
        $(window).scroll(function () {
            var d = $(".video-post-title"),
                f = d.offset().top,
                g = window.pageYOffset;
            
            if (g >= f) {
                b.addClass("sticked"),
                $(".padding-sizer").css("padding-bottom", "56.25%")
            }
            
            else {
                b.removeClass("sticked"),
                $(".padding-sizer").css("padding-bottom", 0)
            }
        })
    }
});
Colored by Color Scripter
cs

개인에 따라 수정할 게 꽤 많을 수 있는 스크립트라, 보기 편하시도록 기존의 스크립트로도 짜봤습니다.

1
2
3
4
5
6
7
8
9
$(function () {
    var b = $(".video-post");
    1 == b.length && ($("body").addClass("video-posted"), b.after("<div class=\"padding-sizer\"></div><div class=\"video-post-title\"></div>"), $(".title, .article_info").appendTo(".video-post-title"), $(window).scroll(function () {
        var d = $(".video-post-title"),
            f = d.offset().top,
            g = window.pageYOffset;
        g >= f ? (b.addClass("sticked"), $(".padding-sizer").css("padding-bottom", "56.25%")) : (b.removeClass("sticked"), $(".padding-sizer").css("padding-bottom", 0))
    }))
});
Colored by Color Scripter
cs

1
$(".article iframe[allowfullscreen]").wrap("<div class=\"youtubevid\"></div>")
cs

저는 기본적으로 글에 있는 모든 iframe을 youtubevid이란 div로 감쌉니다.

이 포스트를 참고하시면 이 div의 역할을 파악하실 수 있습니다. 참고로 저 작업을 하지 않으시면 스크립트가 이상하게 동작할 수 있습니다.

본격적으로 스크립트에 대한 설명으로 들어가자면, 고정하고 싶은 비디오를 글 작성 시 "video-post"란 class를 지닌 div로 감싸주면 이 스크립트가 작동합니다.

단, video-post가 하나일 때만 작동하도록 했습니다.

video-post 뒤에 "padding-sizer", "video-post-title" 두 가지 div가 추가됩니다.

padding-sizer는 비디오가 고정되었을 때 본문의 높이를 유지할 수 있도록 해줍니다.

video-post-title은 비디오가 글의 맨 위로 갈 수 있도록 글의 제목과 작성 날짜, 카테고리 정보 등을 비디오 아래로 내려줍니다. ".title, .article_info"를 본인이 사용 중인 class 명으로 수정해주세요.

다음으로, 페이지를 스크롤 하여 "video-post-title"이 페이지의 최상단으로 오면 video-post에 "sticked"란 class가 추가되고, padding-sizer가 원래 비디오의 높이만큼 padding-bottom을 추가합니다.

설명이 충분했을지 모르겠네요. 여기까지가 내용은 끝입니다.

잘 적용하셨으면 좋겠네요.

티스토리툴바