메인화면 유튜브 영상배경 사용시 모바일~도움부탁드려요
본문
메인화면 유튜브 영상배경 사용시
모바일
즉 폭이 줄어들면
영상과 사진이 모두 중앙을 기준으로 좌우가 줄어들어져 보이는데요
좌측을 고정해서 우측이 줄어들며 가려지도록 혹시 가능할까요?
티로그 테마 사용중입니다~
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();
});
이미지와 영상간격을 조절하시면 되지 않을까 생각합니다.
답변을 작성하시기 전에 로그인 해주세요.