Haha, well this iframe hopefully will appear in your projects HTML component if your successful. What you need is a directive that takes in a vimeo or a youtube url and converts it into an embedded friendly url and the displays it.

If when the page loads there is no {{video}} because is not ready yet, but when is ready for any reason the iframe is not updated. Some styles can’t be added using binding syntax Not necessarily, but it’s usually not a good idea to bind a function in the view because it gets called every time change detection is run. This can also lead your video to be reloaded continually if the <video> tag recognizes it as change every time.

1. HTML5 video player for Angular 2

HTML5 video player for Angular 2

Videogular is a framework to develop video apps built on top of Angular. Videogular was created on 2013 for AngularJS and on 2015 we started the port to Angular 2+. Videogular is different from other GREAT video players like (video.js, jwplayer, etc) because is a wrapper over the HTML5 video tag, so you just can add whatever you want. This provides a very powerful, but simple to use solution, for everybody.

2. Angular Easy YouTube Embed

Angular Easy YouTube Embed

This is an angular 2 component based on youtube player iframe api. This component came out as a result of the open source project Echoes Player – an alternative player for watching and listening to media from youtube.

3. VideoJS Angular 2 Component

VideoJS Angular 2 Component

VideoJS is a (rightfully) popular media player library that makes it easy to skin and control media files. This library can handle many types of media files like MP4s, MOVs and even YT (with a plugin). Videos have traditionally been a tough element to render consistently across browsers. Given the rather recent support for the HTML 5 video element things have gotten better, but it has always been a little tough to consistently style the player itself.

4. DomSanitizer to Embed YouTube Videos

DomSanitizer to Embed YouTube Videos

Before embedding iframes or other potential cross site scripting security flaws, the content has to be sanitised by the DomSanitizer. DomSanitizer will allow Angular to embed the link within the iframe provided by YouTube.

7. Building a Spotify App using Angular 2

Building a Spotify App using Angular 2

This is an Angular 2 app that uses the Spotify API to search and list musical artists and albums. It is part of a 12 project course at Eduonix.xom.This is version 1.1 which uses Angular 2 RC6. The “rc4_old” folder contains the original RC4 version from the Youtube course.

8. AngularJS Youtube iFrame Demo

AngularJS Youtube iFrame Demo

The ng-youtube-embed-iframe lets you embed a YouTube video player on your website and control the player using AngularJs. Using the ng-youtube-embed-iframe functions, you can queue videos for playback; play, pause, or stop those videos, adjust the player volume, or retrieve information about the video being played. You can also add event listeners that will execute in response to certain player events, such as a player state change or a video playback quality change.

Angularjs4u.com is not endorsed or certified by AngularJS. All AngularJS logos and trademarks displayed on this blog are property of AngularJS.
The views expressed on here are purely to help other developers use AngularJS.