# ngx-responsive-embed

> Angular Library for making iframe, embed, object and video responsive and on ratio's 4 by 3 and 16 by 9. Tested on Angular 6

Latest version **1.0.0** (published 2018-05-24) · 0 weekly downloads

## Install

```sh
npm install ngx-responsive-embed
pnpm add ngx-responsive-embed
yarn add ngx-responsive-embed
bun add ngx-responsive-embed
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2018-05-24 |
| First published | 2018-05-24 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 48.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | stevenfernandez |
| Keywords | responsive embed, responsive video, responsive object, responsive iframe, response youtube, video ratio, angular 6 responsive, angular 6 embed, angular 6 video, angular 6, angular 6 library, angular 6 ratio 16by9, angular 6 ratio 4by3, angular 6 keep ratio |

## Links

- npm: https://www.npmjs.com/package/ngx-responsive-embed
- npm.io page: https://npm.io/package/ngx-responsive-embed

## Dependencies (1)

- [tslib](https://npm.io/package/tslib.md) ^1.9.0

## Alternatives

- [@sindresorhus/slugify](https://npm.io/package/@sindresorhus/slugify.md) — 3.7M weekly downloads
- [solid-js](https://npm.io/package/solid-js.md) — 2.7M weekly downloads
- [expo-glass-effect](https://npm.io/package/expo-glass-effect.md) — 2.5M weekly downloads
- [nanoassert](https://npm.io/package/nanoassert.md) — 780.8K weekly downloads
- [@ffmpeg/ffmpeg](https://npm.io/package/@ffmpeg/ffmpeg.md) — 529.5K weekly downloads

## Recent versions

- 1.0.0 (latest) — 2018-05-24
- 0.0.1 — 2018-05-24

## README

ngx-responsive-embed
====================

Angular Library for making iframe, embed, object and video responsive and on ratio's 4 by 3 and 16 by 9. Tested on Angular 6

Tested on Angular 6.

Install
=======

```
npm install ngx-responsive-embed --save
```


Usage Example:
==============

After Installing just add this to your app.module.ts:

```
import { NgxResponsiveEmbedComponent } from 'ngx-responsive-embed';
```

And in the declarations add:

```
NgxResponsiveEmbedComponent
```

Your app module would look something like this:

```
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

import { NgxResponsiveEmbedComponent } from 'ngx-responsive-embed';

@NgModule({
  declarations: [
    AppComponent,
    NgxResponsiveEmbedComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
```

Finally just add this you the component(s) you want to use this library on.

```
import { NgxResponsiveEmbedComponent } from 'ngx-responsive-embed';
```

Your component.ts file would look something like this:

```
import { Component } from '@angular/core';
import { NgxResponsiveEmbedComponent } from 'ngx-responsive-embed';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
}

```

You are now ready to use!

Just go to your component.html file and add this tag:

```
<lib-ngx-responsive-embed></lib-ngx-responsive-embed>
```

You have 2 ratio options which are used as classes: 16by9 and 4by3

So you need to add the ratio you want to the tag like this:

```
<lib-ngx-responsive-embed class="ratio-16by9"></lib-ngx-responsive-embed>
```
or for 4by3 ratio:

```
<lib-ngx-responsive-embed class="ratio-4by3"></lib-ngx-responsive-embed>
```

Inside this tag you can now add EMBED, VIDEO, IFRAME or OBJECT elements.

Here is an iframe example:

```
<lib-ngx-responsive-embed class="ratio-16by9">
    <iframe src="https://www.youtube.com/embed/somecodehere" frameborder="0" allowfullscreen></iframe>
</lib-ngx-responsive-embed>
```

And that's all!


## Author

Steven Fernandez



## License

This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details


Changelog
=========

## [1.0.0] - 2018-05-12
### Added
- First Commit - xml2json conversion

---
_Source: https://npm.io/package/ngx-responsive-embed · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._