정보실

웹학교

정보실

bootstrap 동영상강좌를 반응형으로 연결할 때

본문

유튜브에 제 무료 동영상 강좌가 진행되고 있습니다..

이것을 반응형 홈페이지에 반영하려면 어떻게 하면 될까요?

 

이 홈페이지 메인하단에 하나를 연결해 놓았습니다..

 

PC, 테블릿, 모바일에 맞게 반응형으로 화면이 작동을 합니다.

 

동영상의 가로, 세로 비율에 따라 아래의 코드를 이용하면 됩니다..

 

<!-- 16:9 aspect ratio -->

<div class="embed-responsive embed-responsive-16by9">

  <iframe class="embed-responsive-item" src="…"></iframe>

</div>


<!-- 4:3 aspect ratio -->

<div class="embed-responsive embed-responsive-4by3">

  <iframe class="embed-responsive-item" src="…"></iframe>

</div> 

 

유튜브에서 해당 동영상을 복사할 때 코드와 위 코드를 비교해 보세요...

유튜브동영상에서 마우스 오른쪽 클릭해서 소스를 보면,

가로폭과 세로폭 그리고 frameborder="0" allowfullscreen 이런 코드도 추가된 것을 볼 수가 있는데

이런 것은 제거하고 위 코드를 사용하면 됩니다.

 

 

 

  • 트위터로 보내기
  • 페이스북으로 보내기
  • 구글플러스로 보내기
  • 카카오톡으로 보내기

페이지 정보

조회 1,609회 ]  작성일14-10-14 12:39

웹학교