Higher Res Video Header

Is there any way to have a slightly larger, higher res video for the header and maybe even get rid of the progress bar for the video on mobile?

Hello,

First thanks for using our theme and sorry for the delay here!

To remove the controls from the video, please follow the steps below:

  1. Install and activate the TC Custom JavaScript plugin
  2. Go To Appearance > Custom JavaScript
  3. Paste the following code into the provided box

document.getElementById('wp-custom-header-video').controls = false;

Regarding have the video a slightly larger on mobile, this is possible with custom CSS but will “cut” the sides of your video, since the video always will follow their aspect ratio. Let us know if you want the custom CSS code for that.

Hope this helps!

Kind Regards,

Rodrigo.

aThemes Support

This did not work - still showing controls on mobile and that rather large ‘Pause’ button?

Hello,

Please try with this new JS code:

window.onload = function() {
    setTimeout(function(){
        document.getElementById('wp-custom-header-video').controls = false;
    }, 600);
}

We hope this helps!

Please try that and let us know if you need further help.

Kind Regards,

Rodrigo.

aThemes Support

That improved it a great deal - it now only flashed the controls for a spilt second and then they fade out…

Hello,

Great!

To remove the flash, please try changing the JS code to:

window.onload = function() {
    document.getElementById('wp-custom-header-video').controls = false;
}

We hope this helps!

Please try that and let us know if you need further assistance.

Kind Regards,

Rodrigo.

aThemes Support

Thanks - worked on an Android phone but not my iPhone - may just be my phone - also, I think I would like to get that CSS code you mentioned above to see what adding a high res video will look like - I know you indicated it will cut off the sides but thought I would at least like to see what it looks like…thanks.

Hello,

To increase the video size like I mentioned please try adding the given custom CSS code below at Appearance > Customize > Additional CSS:

@media(max-width: 575px) {
    .wp-custom-header {
        position: relative;
        -webkit-transform: translate3d(-50%, 0, 0);
        transform: translate3d(-50%, 0, 0);
        left: 50%;
        width: 170%;
    }
}

Please try that and let us know if you need further assistance.

Kind Regards,

Rodrigo.

aThemes Support

Thanks Rodrigo - I must say you guys provide the best support of any WP theme I use. I put that code in but did not notice much difference, maybe it does look cleaner, higher res but I tried to remove the current video and add a slightly higher res version (1080, medium) that was 17MB and it still would not let me add that - the current video is 720, medium at 8MB. I have tried the YouTube route but it has annoying ‘cards’ that display, etc. Any way to get that larger, higher res video in? Thanks.

Hello,

Thanks for the kind words!

The CSS code I sent for you works only on mobile and like a “zoom” in the video, increasing their height. Regarding upload higher resolution video, my suggestion for you is use some online tool to reduce the size (in MB) without loosing quality: https://www.mp4compress.com/

We hope this helps!

Please try that and let us know if you need further assistance.

Kind Regards,

Rodrigo.

aThemes Support

Got it, thank you. I have uploaded a compressed video.

Hello,

Great!

If you are satisfied with our theme and support, would be great if you leave your comment and rating in the offical WordPress Themes repository. That helps us a lot: [Astrid] Reviews | WordPress.org

Let us know if you need further help.

Kind Regards,

Rodrigo.

aThemes Support

1 Like