Jump to content

Fabrica Captial


benbyf
 Share

Recommended Posts

Very nice site indeed, I love pretty much everything about it.

Two nitpicks, though:

  • On full HD, the video doesn't seem to scale to fit the whole screen. zooming in and then out or resizing the browser seems to get it to fit.
  • The text in your black content boxes (three up) is vertically aligned to the top, but it should really be in the middle to be consistent with the titles that show before hovering over them.
  • Like 1
Link to comment
Share on other sites

13 hours ago, AndZyk said:

@benbyf

Just wondering what happened to this beautiful site?

Especially as it is featured in the newest weekly issue and people might be confused to see the "Website is coming soon" banner.

Regards, Andreas

Sorry guys think the project owners are getting confused over their DNS settings. you should be able to find it here: http://www.fabricacapital.co.uk/

On 30/11/2016 at 3:56 AM, Mike Rockett said:

Very nice site indeed, I love pretty much everything about it.

Two nitpicks, though:

  • On full HD, the video doesn't seem to scale to fit the whole screen. zooming in and then out or resizing the browser seems to get it to fit.
  • The text in your black content boxes (three up) is vertically aligned to the top, but it should really be in the middle to be consistent with the titles that show before hovering over them.

MIKE! yes help please! I'm finding it near impossible to get a good solution to kepping the video always fullwidth using <video>, css, and a little javascript to check window width and set video width to it or wndow height which even is bigger... but still isnt perfect and im not sure why.

Most of the design is on http://crookdesign.co.uk/ or the client and I could only compremise so much.

Link to comment
Share on other sites

I think you should swap out the video CSS for this:

position: absolute;
min-width: 100%; min-height: 100%;
top: 50%; left: 50%;
transform: translate(-50%, -50%); 

Remove the height and width CSS, and also remove the width attribute from the video tag. Seems to work nicely on my side...

  • Like 1
Link to comment
Share on other sites

23 hours ago, Mike Rockett said:

I think you should swap out the video CSS for this:


position: absolute;
min-width: 100%; min-height: 100%;
top: 50%; left: 50%;
transform: translate(-50%, -50%); 

Remove the height and width CSS, and also remove the width attribute from the video tag. Seems to work nicely on my side...

Thanks @Mike Rockett Works really well for me now! I changed Position to Fixed so it would stay there on scroll and I kept in my js so that it would resize well on window resize (as before it was not covering the window on resize).

here is what I had on the js:

var innerW = window.innerWidth;
var innerH = window.innerHeight;
function adjustVideo(){

    var videoW = $('.video-bg').width();
    var videoH = $('.video-bg').height();

    innerW = window.innerWidth;
    innerH = window.innerHeight;

    if(videoW < innerW){
        $('.video-bg').width(innerW);
        $('.video-bg').height('auto');
    }
	if(videoH < innerH){
    	$('.video-bg').height(innerHeight);
    	$('.video-bg').width('auto');
  	}
}
adjustVideo();
window.addEventListener("resize", adjustVideo);

 

Link to comment
Share on other sites

I keep getting very strange results every now and then after hard refreshes, but doesnt seem to be any consistancy. think there's some issue with the video poster image not being full width, but not really sure what can be done with this as its an attribute added to the <video> element. very strange

Link to comment
Share on other sites

  • 2 months later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...