티스토리에 유튜브 동영상을 반응형으로 자동으로 바꿔주는 소스 코드

블로그를 작성하다보면 유튜브 동영상을 본문에 삽입하는 경우가 자주 있는데요. 이 유튜브 사이즈를 모바일에서도 알아서 맞춰주는 반응형 스타일로 자동으로 바꿔주는 스크립트 소스 코드를 작성해 보도록 하겠습니다.

유튜브 동영상을 반응형으로 바꿔주는 CSS 소스 코드

우선 유튜브 embeded iframe html 코드는 아래와 같이 생겼을 겁니다.

<iframe width="560" height="315" src="https://www.youtube.com/embed/videocodexxx" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

그리고 유튜브 동영상을 반응형으로 바꿔주는 CSS 코드는 아래와 같습니다.

.video_wrapper {
    position: relative;
    padding-bottom: 56.25%; //비디오의 폭이 100%일 경우의 높이 비율
    height: 0;
}

.video_wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

그런데 이 반응형 CSS가 적용이 되기 위해서는 아래와 같은 html 코드가 필요합니다.

<div class="video_wrapper">
    <iframe ...></iframe> <!--유튜브 embeded html 코드 -->
</div>

간단히 말해서 유튜브에서 가져온 html을 감싸주는 <div class="video_wrapper"></div> hml 태그가 필요한 거죠.

그래서 본문 작성할 때 유튜브에서 가져온 html 앞에 위의 예제 코드 처럼 video_wrapper 태그를 수동으로 작성을 해주면 위에 있는 CSS 코드만으로도 충분히 반응형 스타일을 만들 수 있습니다.

CSS 코드를 티스토리의 '스킨 편집'의 CSS 코드에 추가
블로그 본문에 유튜브 embeded 코드를 삽입하고 그 주변을 video_wrapper html 태그로 감싸준다.

유튜브 동영상을 반응형으로 자동으로 바꿔주는 JQuery 소스 코드

그런데 위의 방식 처럼 <div class="video_wrapper"></div> 태그를 본문 작성시 매번 넣어 주는 것도 꽤 번거로운 작업이 아닐수 없는데요. 그래서 이것도 귀찮다 싶으신 분들은 아래의 JQuery 코드 추가해주면 됩니다.

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