Skip to content

Instantly share code, notes, and snippets.

@mikomatic
Created July 21, 2014 13:01
Show Gist options
  • Save mikomatic/f2673c9fb3864b9768ae to your computer and use it in GitHub Desktop.
Save mikomatic/f2673c9fb3864b9768ae to your computer and use it in GitHub Desktop.
Angularjs directive for responsive videos
/* Handle responsive video
* Full credit goes to Todd Motto @toddmotto
* http://toddmotto.com/creating-an-angularjs-directive-from-one-of-your-existing-plugins-scripts/
*/
blogApp.directive('fluidvids',['$sce', function ($sce) {
return {
restrict: 'EA',
replace: true,
scope: {
video: '@'
},
template: '<div class="fluidvids">' +
'<iframe ng-src="{{video}}"></iframe>' +
'</div>',
link: function (scope, element, attrs) {
var ratio = (attrs.height / attrs.width) * 100;
element[0].style.paddingTop = ratio + '%';
}
};
}]);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment