IT인터넷

티스토리 블로그 동영상 반응형으로 설정하는 방법

ヴァレンタイン 2023. 7. 31. 12:56
반응형

동영상 반응형 설정

동영상 반응형 HTML CSS 코드

블로그에 글을 작성하면서
영상을 첨부할 때 "반응형"으로 동영상을 첨부하면 좋습니다.


반응형으로 동영상을 첨부하게 되면,
데스크탑 컴퓨터, 태블릿 및 스마트폰과 같은
다양한 장치 화면 크기에 적절하게 표시할 수 있기 때문에
더 높은 사용자 참여와 더 긴 방문 시간으로 이어질 수 있습니다.

· Html 서식

<div class="video">
  <div>
	<iframe src="https://www.youtube.com/embed/ehQFH62K9NI" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
  </div>
</div>

기본적으로 요즘에는 반응형으로 편하게 등록하실 수 있지만
구글서치에서 크롤링이 잘 되지 않는 상황이 발생하기도 하기 때문에
처음부터 게시글을 작성하실 때 관리하시면 좋습니다.


위에 있는 코드는 서식으로 통해 관리하시고
아래 CSS코드는 스킨편집 CSS에 삽입하여 사용하시면 좋습니다.

· 관리 CSS

/* 비디오 컨텐츠를 16:9비율에 맞춰 반응형으로 만들기 */
.video {position: relative; margin: 0 auto; max-width: 900px; width: 100%;}
.video > div{ width: 100%; padding-bottom: 56.25%;} /* padding-bottom 계산식 height / width * 100 */
.video > div iframe{width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 1; }

Google과 같은 검색 엔진은 검색 결과에서
모바일 친화적인 웹사이트를 우선적으로 처리합니다.

반응형 블로그는 검색 엔진 순위를 높여주고,
게시글의 가시성을 높일 수 있으며 잠재적으로
유기적 트래픽을 늘릴 수 있습니다.


애드센스에 관심을 가지고 계시다면
마냥 게시글을 늘리는 것보다 좀 더 구글에서
크롤링이 잘 될 수 있도록 관리하시면 좋겠습니다.

반응형