친효 스킨 접은 글 유튜브 영상 높이 고정 문제 (v2.2 기준)

* BGM : Crystal Waters - Gyspy in my mind {sped up}

 

목차

 

 

개요

youtube

현재 필자의 블로그에 적용된 스킨은 '친절한 효자손'님이 만든 '친효스킨(v2.2)'이다.

블로그 초기 때부터 항상 잘 써오고 있는 스킨이다.

UI 배치가 특히 마음에 들어 애정이 가는 스킨인데

정말 사소한 부분에 항상 마음에 걸렸던 게 있다.

 

바로 '접은 글'인데 '접은 글' 안에 유튜브 영상을 넣으면

영상의 높이가 짧게 고정되는 문제가 있다.(v2.2 기준)

밑에서 어느정도 언급하겠지만 다른 스킨에서도 이 문제가 발생할 수도 있다.

다르게 말하자면 친효스킨이 잘못된 게 아니라

글쓰기 에디터와 호환하는 과정에서 문제가 있는게 아닌가 생각이 든다.

짤린 영상(아래)

위의 영상은 본문에 삽입한 것이고 아래 영상은 접은 글에 삽입한 것이다.

영상을 재생하고 전체화면 모드를 했다가 풀면 정상적으로 작동하긴 한다.

사소한 부분이고 별로 신경 쓸만한 건 아니지만 뭔가 좀 거슬려서 해결하기로 했다. 

 

원인

다음과 같은 문제가 생긴 이유는 이 스킨이 '반응형'이라서 그렇다.

반응형 웹 디자인(Responsive Web)은 사용자의 디스플레이 크기에 따라 UI를 배치하는 디자인 기법이다.

 

쉽게 말하자면 여러분이 컴퓨터로 블로그를 볼 때와 스마트폰으로 볼 때

글의 배치가 다른 것을 알 수 있다.

더 쉬운 예로 만약 지금 컴퓨터로 이 글을 보고 있다면 인터넷 브라우저의 크기를 작게 조절해보자.

그럼 현재 글의 배치가 브라우저의 크기에 맞게 조절되는 것을 알 수 있다.

친효스킨에는 'resizeYoutube'라는 함수가 있다.

글 안에 있는 유튜브 영상의 크기를 재조정해주는 함수이다.

근데 '접은 글'안에 있는 영상은 처음에는 접혀있는 상태로 재조정해버려서

높이가 이상해지는 것으로 추측된다.

 

해결책

이 함수를 없에는게 가장 간단하지만 그러면 유튜브 영상이 반응적이지 않게 된다.

모바일로 보면 엉망이라는 것이다.

 

함수를 없에고 css를 수정하는 방법도 있고 시도도 해봤는데

복잡한 것에 비해 별로 마음에 들지 않았다.

 

그래서 다음 방법을 추천해주고자 한다.

 

블로그 스킨편집 - html 편집에 들어가서 html 코드 부분으로 들어가자.

 

그리고 ctrl F를 눌러 'resizeYoutube'를 검색해 찾아보자.

 

그러면 다음과 같은 스크립트가 보일 것이다.

 

<script>

	......중략..... 
    $ 어쩌구 저쩌구
    	rezieYoutube()가 어쩌구 저쩌구
        
        
    ..... 중략 ....
    
</script>

여기서 </script> 부분 위에 다음과 같이 입력해준다. 

$(function (){
            $(".btn-toggle-moreless").click(function (){
                setTimeout(function() {
                    resizeYoutube();
                }, 1);
            });
        });

스크립트를 대충 설명하자면

 

"사용자가 '더보기'를 누를 때 resizeYoutube 함수를 0.001초 뒤에 실행한다." 

 

라는 말이다. 접혀있는 상태에서 재조정된 게 문제이니 다시 재조정해주면 된다는 뜻.

 

setTimeout은 시간 지연 함수인데

저게 없으면  접혀있는 상태에서 재조정하기 때문에 변화가 없다.

그래서 0.001초의 지연을 주는 것이다.

 

결론

programming

정말 사소하고 별거 아닌건데 괜히 꽃혀가지고 별 고생을 했다.

그다지 안고쳐도 큰 문제될 것 없지만

나같이 예민한 사람이 있을까봐 글로 써봤다.

고쳐가는 과정에서 javascript에 흥미가 생기기도 했다.

좀 배워보고 싶긴하네.