@nutriot/responsive-ratio NPM

@nutriot/responsive-ratio

Library to adjust iFrame aspect-ratios reponsively, written in TypeScript

Installation

npm install --save @nutriot/responsive-ratio

Usage

Import and initialize the module

import { responsiveRatio } from '@nutriot/responsive-ratio';

window.addEventListener('DOMContentLoaded', event => {
  const options = {
    selectors: 'iframe, video'
  };

  responsiveRatio(options);
});

Here's another example for a React application

import React, { useEffect} from 'react'
import { responsiveRatio} from '@nutriot/responsive-ratio';

export default const App = props => {

  useEffect(() => responsiveRatio(), []);

  return (
    <iframe
      src="https://www.youtube.com/embed/-QFS_VPcbjI"
      width="1920"
      height="1080"
    />
  )
}