Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
A Videgular plugin to emulate background-size CSS property for video (see comment below).
/*
* vg-bkg-size
* A Videogular plugin to emulate background-size CSS property for video: "cover" or "contain"
*
* Use:
* <videogular vg-bkg-size="cover" center="true"></videogular>
* vg-bkg-size => "cover" or "contain"
* center => true or false
*
* Copyright (c) 2014 Panurge Web Studio
* Licensed under the MIT license.
*/
( function( angular, undefined ) {
'use strict';
angular.module( 'vg-bkg-size', [] ).directive( 'vgBkgSize', [ '$window',
function( $window ) {
return {
restrict: 'A',
require: '^videogular',
link: function( $scope, elem, attrs, API ) {
var videoHeight, videoWidth, inited = false,
mode = attrs.vgBkgSize === 'contain' ? 'contain' : 'cover',
center = attrs.center === false ? false : true;
// API extension
API.vgBkgSize = API.vgBkgSize || {};
API.vgBkgSize.update = function() {
if ( !inited ) {
return;
}
var video = API.videoElement[ 0 ];
// get native video size
videoHeight = video.videoHeight;
videoWidth = video.videoWidth;
API.vgBkgSize.layout();
};
API.vgBkgSize.layout = function() {
if ( !inited ) {
return;
}
// get wrapper size
var containerH = elem[ 0 ].offsetHeight,
containerW = elem[ 0 ].offsetWidth;
var newW, newH;
var ratio = videoWidth / videoHeight;
if ( mode === 'contain' ) {
if ( containerH / containerW > videoHeight / videoWidth ) {
newW = containerW;
newH = containerW / ratio;
} else {
newW = containerH * ratio;
newH = containerH;
}
} else if ( mode === 'cover' ) {
if ( containerH / containerW > videoHeight / videoWidth ) {
ratio = videoWidth / videoHeight;
if ( containerH * ratio < containerW ) {
newW = containerW;
newH = containerW / ratio;
} else {
newW = containerH * ratio;
newH = containerH;
}
} else {
if ( containerW / ratio < containerH ) {
newW = containerH * ratio;
newH = containerH;
} else {
newW = containerW;
newH = containerW / ratio;
}
}
};
API.videoElement.css( {
'width': newW + 2,
'height': newH + 2, // +2 pixels to safely prevent empty spaces
'max-height': 'none',
'max-width': 'none'
} );
if ( center ) {
API.videoElement.css( {
'margin-top': ( containerH - ( newH + 2 ) ) / 2,
'margin-left': ( containerW - ( newW + 2 ) ) / 2
} );
} else {
API.videoElement.css( {
'margin-top': '',
'margin-left': ''
} );
}
}
attrs.$observe( 'vgBkgSize', function( nv, ov ) {
if ( nv !== ov ) {
mode = nv === 'contain' ? 'contain' : 'cover';
API.vgBkgSize.layout();
}
} );
attrs.$observe( 'center', function( nv, ov ) {
if ( nv !== ov ) {
center = $scope.$eval( nv ) === false ? false : true;
API.vgBkgSize.layout();
}
} );
$scope.$watch(
function() {
return API.isPlayerReady();
},
function( newVal, oldVal ) {
if ( newVal !== oldVal ) {
if ( newVal === true ) {
inited = true;
API.vgBkgSize.update();
}
else{
inited = false;
}
}
}
);
$scope.$on("$vgBkgSizeUpdate", API.vgBkgSize.update);
$scope.$on("$vgBkgSizeLayout", API.vgBkgSize.layout);
angular.element( $window ).on( 'resize', API.vgBkgSize.layout );
}
};
}
] );
} )( window.angular );
@panurge-ws

This comment has been minimized.

Copy link
Owner Author

panurge-ws commented Sep 11, 2014

Use:
Inject module "'vg-bkg-size" in your app module.

 <videogular vg-bkg-size="cover" center="true"></videogular>
  • vg-bkg-size => "cover" or "contain" (bindable)
  • center => true or false (bindable).

In case you need to manually update the size, you can (best practice):

$scope.$broadcast('$vgBkgSizeUpdate');

$scope.$broadcast('$vgBkgSizeLayout');

Or access two new methods from the API:

// recalc video dimensions and layout
API.vgBkgSize.update() 

// update the size of the video to fit the container
API.vgBkgSize.layout()
@programiro

This comment has been minimized.

Copy link

programiro commented Nov 18, 2014

A complete working example would be nice

@Loac-fr

This comment has been minimized.

Copy link

Loac-fr commented Sep 16, 2015

Hi,
Thanks for this plugin, but I can't get it to work...
I'm new to Angular but can't figure out the error I get :

TypeError: API.isPlayerReady is not a function

I made a quick codepen test using the basic videogular example if this helps : http://codepen.io/loac-fr/pen/LpGodW?editors=101

Maybe a change in videogular API ?

Thanks !

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.