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

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

commented Nov 18, 2014

A complete working example would be nice

@Loac-fr

This comment has been minimized.

Copy link

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.