Reframe.js를 사용하여 모든 임베디드 콘텐츠 반응

가장 까다로운 부분 동영상 퍼가기 올바른 너비와 높이를 얻고 있습니다. 이 번호들 가로 세로 비율 정의 그들이 꺼져있을 때 유쾌한 비디오 플레이어를 얻으십시오..

이것은 모든 내장 요소에 대해 true iframe 및 소셜 미디어 위젯과 같은 그리고 이러한 것들은 일반적으로 반응이 빠른 디자인이기 때문에 더 까다 롭습니다. 응답하지 않는 요소.

하지만 함께 Reframe.js, 당신은 할 수 있습니다 어떤 종횡비에 반응하는 모든 요소.

이것은 아마도 웹상에서 가장 단순하면서도 가치있는 JS 플러그인 중 하나 일 것입니다. 실제로 Dollar Shave Club에 의해 만들어진 놀랍게도 자체 GitHub 페이지가 있습니다..

현재 Reframe 무료 플러그인 중 하나 더 간단한 방법을 원하는 개발자를 위해 제작되었습니다. 응답이 풍부한 임베디드 컨텐츠 처리.

명백한 범인은 YouTube와 Vimeo와 같은 사이트의 임베디드 비디오입니다. 악명 높다. 이러한 요소를 반응 적으로 만들기가 어렵다. CSS 해킹없이.

Reframe.js를 사용하면 고르다 목표로하고 싶은 요소 다시 짜내다 ~을 사용하여 reframe () 기능.

Reframe.js 플러그인을 웹 페이지에 추가하십시오. 너는 할 수있다. 사본 다운로드 GitHub에서 가져온 것입니다..

그럼, 당신은 방금 선택기에 함수 전달하기 어떤 요소를 재 프레임할지. 페이지로드 그리고 붐! 너는 모두 준비가되어 있어야한다..

예를 들어 사이트에 몇 개의 동영상이 삽입되어 있다고 가정 해 보겠습니다. 너는 할 수있다. 수업 추가 .비디오 퍼가기 위해, 그것을 선택자로 사용하십시오. 리 프레임 자동으로 div와 클래스를 추가합니다. 반응 스타일 만들기.

그래서 너 자바 스크립트 코드 다음과 같이 보일 것입니다 :

reframe ( '. 비디오');

아주 단순한 권리?

이 코드는 클래스가있는 모든 요소를 ​​대상으로합니다. .비디오 과 응답하게 만든다.. 추가 해킹이 필요없고 여분의 CSS가 필요하지 않습니다. CSS 방법을 사용할 때 아무런 문제가 없지만 수동으로 감싸는 추가 수업이 포함 된 모든 퍼간 동영상.

그냥 재 프레임 그 여분의 단계를 절약 해줍니다. 자바 스크립트로 모든 것을 가져옵니다. 에 데모를 확인해보십시오. 과 기본 코드 스 니펫 찾기, Reframe.js 홈페이지를 방문하십시오. 너는 할 수있다. 코드 복사본 다운로드 GitHub 레포에서 바로.