반응형
영상 반응형 자동 조절
티스토리 를 이용하시는 분들이 부쩍 많이 늘어났다고 생각하는 요즘 제가 이용하는 팁(Tip) 중에 제일 만족했던 부분을 공유하려 합니다. 바로 반응형 스킨을 이용하시는 분들 중 영상 프레임을 소스로 가지고 왔는데 PC에서 보는 것과 모바일에서 보는 것과 차이가 있다는 것을 느껴지는 분들은 이렇게 하시면 PC 나 모바일 또는 태블릿에서 보기 좋은 사이즈로 자동조절되는 것을 확인하실 수 있습니다.
CSS 코드
일단 동영상 자동조절 CSS 코드입니다. 복사 붙여 넣기 하세요
.divmovie { position:relative; width:100%; padding-bottom:56.25%; }
.divmovie iframe {position:absolute; width:100%; height:100%;}
Html 코드
Html 소스입니다. 글 작성 하실 때 사용하시면 되겠습니다.
<div class="divmovie">
<iframe src="URL" frameborder="0" allowfullscreen="true"></iframe>
</div>
이렇게 적용하시고 나면 width='가로' height='세로'를 지정하지 않아도 동영상 화면의 크기가 자동으로 조절됩니다. (자신의 블로그 사이즈에 맞는 영상으로 노출됩니다)
다른 분들에게 도움 되는 글이었으면 합니다.
반응형
'티스토리' 카테고리의 다른 글
티스토리 빙 웹마스터 사이트맵 등록 오류 (1) | 2024.02.10 |
---|---|
2024년 02월, 티스토리 Open API 종료...순차적 적용 (0) | 2024.01.21 |
윈도우, 맥 스타일 시스템 오류 창 티스토리 디자인 서식 (0) | 2024.01.16 |
컴퓨터 활용 글을 작성할 때 좋은 CMD 티스토리 서식 (0) | 2024.01.15 |
프라치노 공간 스킨 TOC 플로팅 목차 설정하는 방법 (0) | 2023.08.17 |
프라치노 공간 스킨 전체 폰트 변경 방법 (1) | 2023.08.17 |