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 file for details

Changelog

[1.0.0] - 2018-05-12

Added

• First Commit - xml2json conversion