메인화면 유튜브 영상배경 사용시 모바일~도움부탁드려요

메인화면 유튜브 영상배경 사용시 모바일~도움부탁드려요

QA

메인화면 유튜브 영상배경 사용시 모바일~도움부탁드려요

답변 1

본문

메인화면 유튜브 영상배경 사용시

모바일 

즉 폭이 줄어들면

영상과 사진이 모두 중앙을 기준으로 좌우가 줄어들어져 보이는데요

좌측을 고정해서 우측이 줄어들며 가려지도록 혹시 가능할까요?

 

티로그 테마 사용중입니다~

https://giryang.com/index.php

 

그리고 혹시 이미지 두컷에 영상한컷인데 영상에서 조금더 머물게 가능한 방법이 있을까요? ^^;

 

index.php 에서 메인이미지 하단스크립트 내용입니다

 

 


$(document).ready(function() {
    var autoplayTimeout = 4000;
    var $main_owl = $('.main-carousel').owlCarousel({
        items: 1, //보여줄 이미지 갯수
        nav: true,
        loop: true,
        autoplay: true,
        autoplayTimeout: autoplayTimeout,
        navText: ["PREV", "NEXT"]
    });

    var $bar = $('.progress-bar .bar');
    var percent_time = 0;
    var tick = null; //timer
    var tick_time = 8;
    var is_pause = false;
    function start() {
        percent_time = 0;
        is_pause = false;
        tick = setInterval(interval, tick_time);
    }
    function interval() {
        if (is_pause === false) {
            percent_time += 1 * tick_time / autoplayTimeout * 100;
            if (percent_time <= 100) {
                $bar.css({
                    width: percent_time + "%"
                });
            }
        }
    }
    //moved callback
    function moved() {
        if (tick) clearTimeout(tick);
        start();
    }
    function progress_bar(time) {
        $bar.css({
            width: '0%'
        });
        $bar.stop().animate({
            width: '100%'
        }, time);
    }
    //progress_bar(autoplayTimeout);
    moved();
    $main_owl.on('changed.owl.carousel', function(event) {
        setTimeout(function() {
            var $active_el = $($('.main-carousel .active .li')[0]);
            var idx = $active_el.data('idx');
            $('#slider-nav-idx').text(idx);
            moved();
        }, 10); //active 로 변경시간이 소요
        //progress_bar(autoplayTimeout);
        moved();

        //세번째 vedio일때
        if (event.page.index == 2) {
            $(window).scrollTop($(window).scrollTop() + 1);
        }
    });
    jarallax(document.querySelectorAll('.jarallax'), {});
});
 

 

이 질문에 댓글 쓰기 :

답변 1

다음을 참고해 보시는건 어떨까 합니다.

1번 답변

 

1. 이미지와 영상을 포함하는 컨테이너를 만들고, 해당 컨테이너에 CSS를 사용하여 왼쪽에 고정시키는 방법
2. JavaScript를 사용하여 브라우저의 폭이 줄어들 때 컨테이너의 위치를 조정하는 방법

 

2번 답변


$(window).resize(function() {
    adjustLayout();
});
function adjustLayout() {
    var windowWidth = $(window).width();
    if (windowWidth < 768) { // 여기에 적절한 브레이크포인트 값을 넣어주세요
        // 브레이크포인트가 768px 이하인 경우
        // 이미지와 영상을 감싸고 있는 컨테이너의 CSS를 수정하여 왼쪽에 고정시킵니다.
        $('.main-carousel .item').css({
            position: 'relative', // 다른 요소에 영향을 주지 않도록
            left: '0' // 왼쪽에 고정
        });
    } else {
        // 기본적인 스타일을 복원합니다.
        $('.main-carousel .item').css({
            position: 'static',
            left: 'auto'
        });
    }
}
// 페이지 로드시 한 번 실행하여 초기 레이아웃을 설정합니다.
$(document).ready(function() {
    adjustLayout();
});

이미지와 영상간격을 조절하시면 되지 않을까 생각합니다.

답변을 작성하시기 전에 로그인 해주세요.
QA 내용 검색
질문등록
전체 17
© SIRSOFT
현재 페이지 제일 처음으로