테스트 사이트 - 개발 중인 베타 버전입니다

유투브 영상을 배경으로 사용 시 모바일에서 여백 채택완료

메이드 2년 전 조회 1,875

제목 그대로 유투브 영상을 배경으로 하여 풀스크린으로 사용 시
모바일에서 화면 비율에 따라 아래부분이 잘리는 현상이 있습니다.

가로 세로 비율 관계 없이 아래부분이 잘리지 않게 하는 방법이 있을까요?

 

댓글을 작성하려면 로그인이 필요합니다.

답변 5개

채택된 답변
+20 포인트

오 이걸 제가 지금 봤네요.

비율 무시 리사이징은 아이프레임이나 아이프레임을 반응형으로 감싸고 있는 div 에서 하면 안 되고 그 상위에 div 를 또 하나 감아서 그 div 를 리사이징 해야 합니다.

모바일에서는 항상 onresize 를 동반해야 하구요.

음. 제가 내일 한번 만들어 볼게요. 저도 이런 형태를 다루는 함수를 하나 만들고 싶었거든요.

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

메이드
2년 전
답변 감사드려요. 이게 보니깐, 세로의 길이를 구해서 가로 세로 비율을 화면에 맞게 가로를 늘려버리더라구요. 그러다 보니 큰 차이는 아닌데 뭔가 폰마다 조금씩 다른 느낌이 나고 해서
모바일은 전체화면을 안쓰고 세로 60vh로 해버렸어요;;;

댓글을 작성하려면 로그인이 필요합니다.

 

천재라기 보다는 제가 출신이 액션 스크립터라서 그래요.

플래시에서 제가 주로 그래픽 스크립트와 미디어 스크립트를 많이 하다 보니 xml 갤러리 등을 만들 때 이미지를 로드로 불러서 css 에서의 object-fit:cover 기능을 쓸 때가 많거든요.

그런데 css 에서는 저 간단한 게 액션 스크립트에는 없어서 리사이징 스크립트를 만들어 사용해야 합니다.

더구나 액션 스크립트에서는 유튜브 api 를 받아 쓸 수 있기 때문에 유튜브 만지는 건 아주 낯익은 작업이었고 액션 스크립트에서 저런 걸 많이 다루다 보니 아 이런 건 요리 처리해야 되겠다는 "느낌"이 빨리 오는 편이죠.

그리고 그 느낌이 자바스크립트로 치환해서도 결과와 일치하더라구요.

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

메이드님 https://sir.kr/g5_tip/20063 이것 한번 참조해 보세요.

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

메이드
2년 전
천재신가요? 가로 세로 생각만 하다 머리가 지끈거려서 두 손 들었는데

댓글을 작성하려면 로그인이 필요합니다.

어찌하건 해결하셨다니 다행이네요.

저는 그럼 다른 걸 먼저하고 이 코드는 다음에 만져 볼게요.^^

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

들레아빠

tail.sub.php에 넣어 보세요.

</p>

<p><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></p>

<p>

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인