@nutriot/responsive-ratio

0.1.3 • Public • Published

@nutriot/responsive-ratio

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

npm npm CircleCI

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"
    />
  )
}

Options

injectStyles

Type: boolean
Default: true

Specifies whether to inject default styles

selectors

Type: string
Default: iframe

CSS selector for elements that should be resized

wrapperClass

Type: string
Default: responsive-ratio

Specifies the wrapper elements default class name

License

This work is licensed under The MIT License

Package Sidebar

Install

npm i @nutriot/responsive-ratio

Weekly Downloads

0

Version

0.1.3

License

MIT

Unpacked Size

11.9 kB

Total Files

8

Last publish

Collaborators

  • idleberg