Salient v13.0 Major Release (3/25/2021) is now available.

If you're on a version prior to 10.5 and are considering updating, it's important to read through our update guide before updating to ensure a smooth transition.

Click here to view the update guide

Okay
  Public Ticket #2703775
How to add custom video source with JS/CSS
Closed

Comments

  • tostevincharlie started the conversation

    Hi

    I have a self-hosted video background playing in the banner here: https://inspiringactiveplaces.je/

    I would like to know any workarounds possible to place larger videos in this space. I'm aware of YouTube backgrounds but they seem to take a long time to load and look sloppy.

    Is there an easy line of custom JS / CSS that will allow me to place any video source in there instead? Could be vimeo or something from google drive or our server...


    Thanks in advance.

  •  5,652
    Tahir - SUPPORT replied

    Hey Again,

    We do have a "Self Hosted Video Player" Page Element available that you can use to add the Videos other than Backgrounds.

    Thanks 

  • tostevincharlie replied

    Hi Tahir

    The self-hosted player still only has the option to upload through wordpress with a max size of 2mb which is too small as video is around 30mb.

    Also, surely this just shrinks with the video with the window? I need a full-height video that crops when the window is scaled down (see below).

    This is the actual site, and how the youtube video responds is how I want it to be, just without the overlays and the slow loading speed: http://envirorally.oi-you.io/


    Thanks

  •  5,652
    Tahir - SUPPORT replied

    Hey Again,

    - You can change the Limit in here: https://www.wpbeginner.com/wp-tutorials/how-to-increase-the-maximum-file-upload-size-in-wordpress/

    - Try using the "Video Lightbox" Page Element and check.

    Thanks

  • tostevincharlie replied

    I pasted the code in the theme functions (see attached). Will that work, or do I need to follow one of the other routes?

    Thanks for your quick responses by the way, much needed and appreciated.

  • tostevincharlie replied

    sorry, this is the attachment.

    Attached files:  Screenshot 2021-02-26 at 14.58.13.png

  •  5,652
    Tahir - SUPPORT replied

    This could be hard coded by your hosting provider so they can best increase this for you.

    Thanks 

  • tostevincharlie replied

    Thanks, we're on it.

    Secondly, how can I reduce the white bar that's showing near the footer? (see attached) I've disabled the footer with CSS as far as I'm aware and turned off all known options in the theme settings.


    Thanks

    Attached files:  Screenshot 2021-02-26 at 15.10.46.png

  •  5,652
    Tahir - SUPPORT replied

    Hey Again,

    Try using the "No Footer" Page Template and remove any extra CSS in there: 

    2397217988.pngClick to View Larger Image.

    Thanks 

  • tostevincharlie replied

    Hi Tahir

    Hasn't worked unfortunately. Strangely not as much of an issue on the initial test page i set up here, but still there only smaller:  https://electricliving.gg/enviro-test-page/

  •  5,652
    Tahir - SUPPORT replied

    Could you allow us to log in to your website backend dashboard so we can check on this for you more?. We are gonna need the username and password of admin user as well as the login url.

  •   tostevincharlie replied privately
  •  5,652
    Tahir - SUPPORT replied

    Hey Again,

    The user pass provided is of a different domain?.

    Thanks 

  •   tostevincharlie replied privately
  •  5,652
    Tahir - SUPPORT replied

    Just set the Page Template to "No Header & Footer" and its working now.

    Thanks

  • tostevincharlie replied

    Excellent, thanks dude.

    Really appreciate your help.