Perth Pro Header Video Black Border

Hi
I’m currently creating a website using the perth pro theme and this website requires a video as the header. the video dimensions I’ve tried it with is 1920 x 956 and 950 x 275 (the original). when doing this i get a black boarder at the top and bottom of the video. i have tried this with both dimensions to prove it wasn’t the video proportion that was wrong and i got the exact same result. how do i remove the black boarder? also where is the setting to make the video stop after playing once and not repeating? ideally i want the video to work with 1920x600 as the resolution.

the website is dev.geberit-csp.co.uk
what i want it to look like can be seen on geberit-csp.co.uk (not for long)

Many Thanks James

Hello James,

I asked our Developer to check this issue, let’s see what he says.

Kind Regards, Roman.

1 Like

Hi,

I did some tests and it is indeed connected to the video resolution. We’re using some built-in WP code to handle the video and unfortunately it seems to have some issues with non-standard sizes.
We can fix it however with two steps:

  1. Go to Customize > Additional CSS and paste this:
.video-container video,
.video-container .mejs-container {
	height: auto !important;
}
  1. Install the TC Custom Javascript plugin and add this in it:
jQuery(function($) {
	function matchVideoHeight() {
		var vidHeight = $( '.video-container video' ).outerHeight();
		$( '.video-container' ).css('height', vidHeight );
	}
	$(document).ready( matchVideoHeight );
	$(window).on( 'resize', matchVideoHeight );
});

We can add an option to disable looping but it is currently not possible.

Let me know how it goes please.

Vlad

Hi

Thank you for that, it has fixed the black box area. :smiley:

I’ve noticed that this has caused an unexpected error as the pause button for the video is not centred and is above centre of the video. if possible can i remove the pause feature of the video so it cannot be stopped (this would be the best option by far for me), if not how do i centre the pause button for the video.

if you could bring the video loop feature out (if theres no code that would work) that would be great. at the moment I’ve just made the end of the video longer but feel this could cause some lag as the video is much longer than needed.

many thanks James.


forgot to add this

You can add this also in Customize > Additional CSS to hide the button:

.mejs-overlay-button {
    display: none;
}

Yeah extending the video isn’t really a good option. If you have FTP access, I suggest you go to the theme’s folder, find header.php and do a search for loop="on". Change on to off.
If it’s easier, I can just send you the modified file over email.

Vlad

Hi
ive done the code and that has removed the pause button. is there a way to remove the pause feature, so the video canon be stopped?

also ive changed the code in the header.php file

but as you can see from the website it still loops?

many thanks

Hi
also i have tried this on two other sites that i have that use the same theme and both of these won’t stop looping of the video, do you have a different way of stopping this from looping if this is an error with the code not turning looping off.

Thanks

Hi,

Really sorry for not replying sooner, my notifications for this thread were not set properly so I just got a notice for your last reply, because you replied to me directly.

You should actually remove the loop part completely.
So basically it would be:

<?php echo do_shortcode('[video autoplay="on" poster="' . esc_url($poster) . '" mp4="' . esc_url($mp4) . '" webm="' . esc_url($webm) . '" ogv="' . esc_url($ogv) . '"]'); ?>

Apparently setting it to off doesn’t work.

Hi

No prob, i have done this and it has stopped the looping :smiley:, when the video ends it goes back to the beginning and leaves the grey background instead of the end frame of the video. the file i am using is http://dev.geberit-csp.co.uk/wp-content/uploads/2018/02/new-banner-short-final.mp4 and as you can see from that the final frame is the end of the video, this is what i want to be left after the animation has ended, is there a way to have the video stop on the last frame rather than looping back to the first? also there is a looping type icon that flickers by the email icon in the header that happens when the video finishes and goes back to the first frame, is there any way to remove that?

Many Thanks

Hi

also ive noticed that the header works on apple mac that i use but it doesn’t work on windows or mobile devices

Untitled-1 also this isn’t playing the video when i load it on another 27" iMac, it just has a grey screen. is that due to me only having the mp4 version of the file? how do i make the video not have the play bar on windows and mobile devices?
Thanks

Hi,

Seems to work fine on both Windows and mobiles. Is this resolved? It also stops at the last frame. I mean, when it stops, I see the list on the right.

Please reply directly to my message, otherwise I don’t get notified for some reason.

Vlad

Hi
no, whenever i try this on many different mobiles and laptops i get the same result. if you open the website geberit-csp.co.uk on a full page view it looks fine but then if you grab one of the edges of the browser and shrink it width ways it adds the play bar on top of the video. i don’t know why it does this but it is whenever the width shrinks below a certain point that it adds the progress bar to the video. I’ve attached two screenshots to illustrate what i mean as its the width that determines if the bar appears.


thanks

sorry it didn’t seem to reply to you the first time
Hi
no, whenever i try this on many different mobiles and laptops i get the same result. if you open the website geberit-csp.co.uk on a full page view it looks fine but then if you grab one of the edges of the browser and shrink it width ways it adds the play bar on top of the video. i don’t know why it does this but it is whenever the width shrinks below a certain point that it adds the progress bar to the video. I’ve attached two screenshots to illustrate what i mean as its the width that determines if the bar appears.


thanks

No what I meant is that the video is visible both on Windows and mobiles.

We can hide the progress bars with this:

.mejs-controls {
    display: none;
}

Hi
ive tries the code that you suggested but as you can see from the screenshot this isn’t working for removing the progress bar


do you have another way to remove the progress bar?
Thanks

forgot to Hi
ive tries the code that you suggested but as you can see from the screenshot this isn’t working for removing the progress bar


do you have another way to remove the progress bar?
Thanks

Hi,

It seems you’ve added a different code, not the one I gave you?

sorry i added the wrong image, i did use the code and it doesn’t appear to be working.


thanks

Sorry about that, just need to add !important, like this:

.mejs-controls {
    display: none !important;
}