유튜브 반응형 크기조절 방법

제가 운영하고 있는 사이트에서 유튜브관련 문제점이 보여서 해결방법을 찾다가 정리차원에서 글을 남깁니다. 증상은 유튜브 링크를 삽입을 하였는데 자체적으로 나오는건 문제가 없지만, 모바일 환경이 되었을때 크기가 고정이 되는 문제입니다.

 

 

2017/05/16 - [TIPS] - 크롬 캐시삭제 안내

2017/05/15 - [TIPS/윈도우7] - 대국민 랜섬웨어 예방 및 방지 방법

2017/05/14 - [마케팅/블로그] - 티스토리 서식 만들기

2017/05/11 - [마케팅/블로그] - 네이버 블로그 지수에 관한 잡담

2017/05/10 - [생활정보] - 코엑스 주차요금 안내

 

유튜브 반응형 크기조절 방법

제가 알려드리는 방법은 티스토리에도 물론 적용이 되기 때문에 두루 이용하시면 될것 같습니다. 유튜브에서 기본링크를 가져오게 되면 사이즈가 고정이 되어 있는 문제점이 있습니다. 그래서 CSS와 DIV태그를 통해서 사이즈를 임의로 조절하는 방법을 사용합니다.

 

따라서 내부 소스가 어떻게 돌아가든 유튜브 반응형 크기조절은 CSS를 통해서 크기가 제어가 되게 됩니다. 참고 소스를 보시고 바로 적용하시기 바랍니다. 사이트나 티스토리에 적용을 위해서는 내부 코드를 DIV태그로 감싸주어야 하며, 기본 CSS 소스를 삽입해주어야 합니다.

 

우선 삽입해야될 CSS소스입니다.

 

<style>  .youtube{position:relative;width:100%;padding-bottom:56.25%;} .youtube iframe{position:absolute;width:100%;height:100%;} </style>

 

 

다음으로 적용될 양식입니다. 참고하셔서 유튜브링크를 넣어주실때 활용하시기 바랍니다.

 

<div class="youtube">

 

넣고 싶은 유튜브링크

 

</div>

 

 

이런식으로 활용을 해주시면 간단하게 적용이 됩니다.

 

 

 

 

참고로, 티스토리에 적용을 위해서는 티스토리 관리자 - HTML/CSS편집 메뉴에 추가만 해주시면 됩니다. 물론 사이트도 똑같이 해주시면 됩니다.

 

 

티스토리 관리자메뉴를 보시면 HTML/CSS 편집 메뉴가 있습니다. 클릭해주세요!

 

 

 

다음으로 HTML 영역에서 </head> 태그위에 위의 CSS 소스를 넣어주시면 됩니다. 사실 어디든 위치는 상관이 없지만 웹표준에 맞춰서 Head 태그사이에 넣어주세요.

 

이렇게 하면 티스토리 내에서는 유튜브 반응형 조절이 완성이 되는데요. 사용방법도 동일하게 <div> 태그 를 활용해서 사용해주시면 됩니다. 이러한 작업을 매번하시 번거로우시면 서식으로 미리 만들어 놓고 로드를 할 수 있습니다.

 

2017/05/14 - [마케팅/블로그] - 티스토리 서식 만들기

 

요글을 참고하셔서 서식으로 활용을 하시기 바랍니다. 오늘은 유튜브 반응형 크기조절 방법에 대해서 알려드렸습니다.