티스토리 유튜브 영상 반응형으로 만들기

티스토리 유튜브 영상의 경우 기본적으로 반응형으로 되어있지 않아 모바일 세로 화면에서 볼 경우 썸네일이 잘려 보인다.

유튜브 동영상을 반응형으로 만들면 모바일 세로화면에서도 잘리지 않고 보인다.

유튜브 동영상을 반응형으로 만드는 방법을 알아보면

 

<script type="text/javascript">
$(window).resize(function(){resizeYoutube();});
$(function(){resizeYoutube();});
function resizeYoutube(){ $("iframe").each(function(){ if( /^https?:\/\/www.youtube.com\/embed\//g.test($(this).attr("src")) ){ $(this).css("width","100%"); $(this).css("height",Math.ceil( parseInt($(this).css("width")) * 480 / 854 ) + "px");} }); }
</script>

 

우선 기본 코드는 이렇다

이 코드를 </head> 바로 앞에 넣으면 된다

이렇게 넣으면 유튜브 동영상이 반응형이 되어 모바일 세로 화면에서도 썸네일이 잘리지 않고 그대로 보일 것이다

 

 

다음은 이 블로그의 경우 유튜브 동영상의 본문 여백을 제거하고 있는데 제거하면서 반응형으로 만드는 방법을 알아보자

 

<script type="text/javascript">
$(window).resize(function(){resizeYoutube();});
$(function(){resizeYoutube();});
function resizeYoutube(){ $("iframe").each(function(){ if( /^https?:\/\/www.youtube.com\/embed\//g.test($(this).attr("src")) ){ $(this).css("height",Math.ceil( parseInt($(this).css("width")) * 480 / 854 ) + "px");} }); }
</script>

 

위의 코드와 같이 기본 처음 코드에서 $(this).css("width","100%"); 이 부분을 삭제한다.

그 뒤에 </head> 바로 앞에 위 코드를 넣는다.

 

 

figure[data-ke-type='video'][data-ke-style='alignCenter'] {
    max-width: 110% !important;
    margin: 20px -1em;
}

 

그 뒤에 동영상의 본문 여백을 제거하기 위해 css에 위의 코드를 추가한다.

 

이러면 완성이다.

여백을 제거하고 반응형 유튜브 동영상을 만들수 있다.

 

 

참고

 

<script>
    $(function() {
        //Youtube의 태그를 찾아서 video_wrapper 태그를 추가
        $('iframe[src*="youtube.com"]').each(function() {
            $(this).wrap('<div class="video_wrapper"></div>');
        });
    });
</script>

 

유튜브 코드에 태그를 추가하는 스크립트라고 한다

위의 코드는 유튜브

</body>위에 삽입하면 된다.

 

출처

https://goodbypoor.tistory.com/182

 

위의 방법으로 하면 딱히 쓸일은 없지만 혹시 다른 곳에 응용할 수 있을까 싶어 참고로 넣었다.

 

티스토리 사진 좌우 여백 제거 방법