<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap-css@*" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<script data-require="angular.js@*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
<script data-require="ui-bootstrap@*" data-semver="0.11.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.min.js"></script>
<script data-require="angular-ui-router@*" data-semver="0.2.10" src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.js"></script>
<script data-require="angular-touch@*" data-semver="1.2.13" src="http://code.angularjs.org/1.2.13/angular-touch.js"></script>
<script data-require="fastclick@*" data-semver="0.6.0" src="//cdnjs.cloudflare.com/ajax/libs/fastclick/0.6.0/fastclick.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app="app">
<div ng-controller="AppController" ng-click="doSomethingAwesome()">
<div>
<input type="checkbox" id="chk-1" />
<label for="chk-1">This checkbox and video does not work</label>
</div>
<video width="320" height="240" controls="">
<source src="http://www.w3schools.com/tags/movie.mp4" type="video/mp4" />
<source src="http://www.w3schools.com/tags/movie.ogg" type="video/ogg" />
Your browser does not support the video tag.
</video>
</div>
<div ng-controller="AppController">
<div>
<input type="checkbox" id="chk-2" />
<label for="chk-2">This checkbox and video works</label>
</div>
<video width="320" height="240" controls="">
<source src="http://www.w3schools.com/tags/movie.mp4" type="video/mp4" />
<source src="http://www.w3schools.com/tags/movie.ogg" type="video/ogg" />
Your browser does not support the video tag.
</video>
</div>
</body>
</html>
// Code goes here
angular.module('app', [
'ui.router',
'ui.bootstrap',
'ngTouch' // remove ngTouch and the first checkbox works
])
.controller('AppController', function($scope) {
$scope.doSomethingAwesome = function() {
// something awesome yeah!
};
});
/* Styles go here */
input[type="checkbox"] {
/* All browsers except webkit*/
transform: scale(2.5);
/* Webkit browsers*/
-webkit-transform: scale(2.5);
margin: 1em;
}
body {
text-align: center;
}