<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" type="text/css" href="http://code.ionicframework.com/nightly/css/ionic.css">
<script src="http://code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
<script src="script.js"></script>
<script src="fitvids.js"></script>
</head>
<body ng-app="starter">
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">Ionic Blank Starter</h1>
</ion-header-bar>
<ion-content>
<div fit-vids>
<iframe width="640" height="360" src="//www.youtube.com/embed/uyK7q2nvfP4?rel=0&showinfo=0" frameborder="0" allowfullscreen></iframe>
</div>
</ion-content>
</ion-pane>
</body>
</html>
// Ionic Starter App
// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
angular.module('starter', ['ionic', 'fitVids'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
})
<ion-side-menus>
<!-- Center content -->
<ion-side-menu-content>
<ion-header-bar class="bar-positive">
<button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
</ion-header-bar>
<ion-content>
<ion-slide-box does-continue="true" slide-interval="8000">
<ion-slide ng-repeat="slide in slides | limitTo: 5">
<span class="box" style="background-image: url({{ slide.slider_image.0 }});"></span>
</ion-slide>
</ion-slide-box>
</ion-content>
</ion-side-menu-content>
<!-- Left menu -->
<ion-side-menu side="left">
<ion-header-bar class="bar-positive">
</ion-header-bar>
<ion-content>
<ion-list>
<ion-item class="item-icon-left" nav-clear menu-close href="#/app/video">
<i class="icon ion-social-youtube"></i>
Video
</ion-item>
<ion-item class="item-icon-left" nav-clear menu-close href="#/app/music">
<i class="icon ion-music-note"></i>
Music
</ion-item>
<ion-item class="item-icon-left" nav-clear menu-close href="#/app/posts">
<i class="icon ion-document-text"></i>
Blog
</ion-item>
<ion-item class="item-icon-left" nav-clear menu-close href="#/app/stats">
<i class="icon ion-stats-bars"></i>
Stats
</ion-item>
<form class="item item-input" ng-submit="submit()" ng-controller="SubmitCtrl">
<i class="icon ion-search placeholder-icon"></i>
<input type="text" ng-model="text" placeholder="Search">
<input hidden="true" type="submit" />
</form>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>
/**
* @ngdoc directive
* @name fitVids.directive:fitVids
* @restrict A
*
* @version 0.1.0
*
* @description
* Angular direYctive port of FitVids (http://fitvidsjs.com/).
*/
angular.module('fitVids', []).directive('fitVids', [function() {
'use strict';
if (!document.getElementById('fit-vids-style')) {
var div = document.createElement('div');
var ref = document.getElementsByTagName('base')[0] || document.getElementsByTagName('script')[0];
var cssStyles = '­<style>.fluid-width-video-wrapper{width:100%;position:relative;padding:0;}.fluid-width-video-wrapper iframe,.fluid-width-video-wrapper object,.fluid-width-video-wrapper embed {position:absolute;top:0;left:0;width:100%;height:100%;}</style>';
div.className = 'fit-vids-style';
div.id = 'fit-vids-style';
div.style.display = 'none';
div.innerHTML = cssStyles;
ref.parentNode.insertBefore(div, ref);
}
return {
restrict: 'A',
link: function (scope, element, attr) {
var selectors = [
"iframe[src*='player.vimeo.com']",
"iframe[src*='youtube.com']",
"iframe[src*='youtube-nocookie.com']",
"iframe[src*='kickstarter.com'][src*='video.html']",
"object",
"embed"
];
var videos;
if (attr.customSelector) {
selectors.push(attr.customSelector);
}
videos = element[0].querySelectorAll(selectors.join(','));
angular.forEach(videos, function (item) {
var $item = angular.element(item);
var height, width, aspectRatio;
if (item.tagName.toLowerCase() === 'embed' &&
($item.parent().tagName === 'object' && $item.parent().length) ||
$item.parent().hasClass('.fluid-width-video-wrapper')) {
return;
}
height = (item.tagName.toLowerCase() === 'object' || $item.attr('height')) ? parseInt($item.attr('height'), 10) : $item.height();
width = !isNaN(parseInt($item.attr('width'), 10)) ? parseInt($item.attr('width'), 10) : $item.width();
aspectRatio = height / width;
if (!$item.attr('id')) {
var videoID = 'fitvid' + Math.floor(Math.random()*999999);
$item.attr('id', videoID);
}
$item.wrap('<div class="fluid-width-video-wrapper" />').parent().css('padding-top', (aspectRatio * 100) + "%");
$item.removeAttr('height').removeAttr('width');
});
}
};
}]);