유투브 영상을 배경으로 사용 시 모바일에서 여백
본문
제목 그대로 유투브 영상을 배경으로 하여 풀스크린으로 사용 시
모바일에서 화면 비율에 따라 아래부분이 잘리는 현상이 있습니다.
가로 세로 비율 관계 없이 아래부분이 잘리지 않게 하는 방법이 있을까요?
답변 5
오 이걸 제가 지금 봤네요.
비율 무시 리사이징은 아이프레임이나 아이프레임을 반응형으로 감싸고 있는 div 에서 하면 안 되고 그 상위에 div 를 또 하나 감아서 그 div 를 리사이징 해야 합니다.
모바일에서는 항상 onresize 를 동반해야 하구요.
음. 제가 내일 한번 만들어 볼게요. 저도 이런 형태를 다루는 함수를 하나 만들고 싶었거든요.
답변 감사드려요. 이게 보니깐, 세로의 길이를 구해서 가로 세로 비율을 화면에 맞게 가로를 늘려버리더라구요. 그러다 보니 큰 차이는 아닌데 뭔가 폰마다 조금씩 다른 느낌이 나고 해서
모바일은 전체화면을 안쓰고 세로 60vh로 해버렸어요;;;
천재라기 보다는 제가 출신이 액션 스크립터라서 그래요.
플래시에서 제가 주로 그래픽 스크립트와 미디어 스크립트를 많이 하다 보니 xml 갤러리 등을 만들 때 이미지를 로드로 불러서 css 에서의 object-fit:cover 기능을 쓸 때가 많거든요.
그런데 css 에서는 저 간단한 게 액션 스크립트에는 없어서 리사이징 스크립트를 만들어 사용해야 합니다.
더구나 액션 스크립트에서는 유튜브 api 를 받아 쓸 수 있기 때문에 유튜브 만지는 건 아주 낯익은 작업이었고 액션 스크립트에서 저런 걸 많이 다루다 보니 아 이런 건 요리 처리해야 되겠다는 "느낌"이 빨리 오는 편이죠.
그리고 그 느낌이 자바스크립트로 치환해서도 결과와 일치하더라구요.
tail.sub.php에 넣어 보세요.
<script src="<?php echo G5_THEME_JS_URL?>/jquery.youtube-background.min.js"></script>
<script>
$(document).ready(function() {
$('[data-vbg]').youtube_background(); // 실행
});
</script>
<div style="position: fixed;width: 100% !important; height: 100%; left: 0; bottom: 0;opacity:.1;z-index:-1">
<div data-vbg-autoplay="true" data-vbg="/yjs.mp4"></div>
</div>
어찌하건 해결하셨다니 다행이네요.
저는 그럼 다른 걸 먼저하고 이 코드는 다음에 만져 볼게요.^^
천재신가요? 가로 세로 생각만 하다 머리가 지끈거려서 두 손 들었는데
