구글 블로그스팟 유튜브 영상 사이즈 최적화( Google Blogspot Youtube Size Optimized)

구글 블로그스팟 유튜브 영상 사이즈 최적화

( Google Blogspot Youtube Size Optimized)


구글 블로그스팟 유튜브 Link 추가시에 영상 사이즈 최적화 하는 방법( 반응형 웹 디자인)


1. 영상 추가하는 글에 HTML 변환 후 아래 문구 추가

<div class="embed-responsive">
  (복사한 퍼가기 코드)
</div>




2. CSS 추가: BLOG 테마 <Head></Head> 사이

/*CSS embaed resposible */
.embed-responsive {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  overflow: hidden;
}
.embed-responsive::before {
  display: block;
  content: "";
  padding-top: 56.25%; /* 16:9 화면 비율 */
}
.embed-responsive > iframe {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}





다음 이전