ng-youtube-embed
Version:
AngularJS module to embed Youtube videos with support for Youtube player parameters and JavaScript API for iframe embeds. Superlight (less than 5KB) and easy to use! Supports Youtube video URLs and IDs. No 3rd party JS dependencies.
75 lines • 3.35 kB
HTML
<html lang="en" ng-app="myApp">
<head>
<title>ng-youtube-embed Demo</title>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="styles.css">
</head>
<body ng-controller="myCtrl">
<div class="text-center">
<img src="../icon.png" alt="ng-youtube-embed icon" />
<h1>ng-youtube-embed Demo</h1>
</div>
<div class="container">
<div class="row">
<div class="col-sm-6 wrapper">
<ng-youtube-embed
video="video1"
width="100%">
</ng-youtube-embed>
<label class="text-center">Simple embed (Add youtube video URL or Id)</label>
</div>
<div class="col-sm-6 wrapper">
<ng-youtube-embed
video="video2"
playlist="https://www.youtube.com/watch?v=dulxbKkj9Wg,https://www.youtube.com/watch?v=lxgelwqe8-E"
width="100%">
</ng-youtube-embed>
<label class="text-center">Playlist</label>
</div>
<div class="col-sm-6 wrapper">
<ng-youtube-embed
video="video3"
width="100%">
</ng-youtube-embed>
<label class="text-center">Update video URL / Id (watch scope changes)</label>
<form>
<input class="form-control" type="text" id="link" name="link" placeholder="Change URL" ng-model="video3">
</form>
</div>
<div class="col-sm-6 wrapper">
<ng-youtube-embed
video="video4"
width="100%">
</ng-youtube-embed>
<label class="text-center">Out of the box <a href="https://gaming.youtube.com/" target="_blank">gaming.youtube.com</a> support (without any extra parameter)</label>
</div>
<div class="col-sm-6 wrapper">
<ng-youtube-embed
listtype="search"
list="jsconfeu"
width="100%">
</ng-youtube-embed>
<label class="text-center">Support for preloaded lists (no need to provide video URL or Id)</label>
</div>
<div class="col-sm-6 wrapper">
<ng-youtube-embed
video="video5"
enablejsapi="true"
videoid="stillEchoes"
onstatechange="stateChanged"
width="100%">
</ng-youtube-embed>
<label class="text-center">Youtube iframe embed JS API support (with all supported events and actions)</label>
<button class="btn btn-primary" ng-click="playVideo()">Play video</button>
<button class="btn btn-info" ng-click="showVideoInfo()">Show video info</button>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
<script src="../build/ng-youtube-embed.min.js"></script>
<script src="app.js"></script>
</body>
</html>