Inspiro – Video Background on Hover
In our video themes Inspiro and Reel you can set a short video to play automatically when hovering a specific Portfolio post in a gallery.
There are 2 ways to add background videos on hover:
- By uploading a self-hosted video
- By inserting a YouTube or Vimeo URL
Adding a self-hosted video in background on hover
You can upload a short video in each Portfolio post in the Video Background on Hover tab in Video Settings:
We recommend you to prepare a small video for each post, as you don’t need it to be larger than 600x400px. Make sure that the size of the file is also under 2-3 MB.
Adding a YouTube or Vimeo video in background on hover
Using the GIPHY API integration we’ve been able to add an easier way to add a video in background on hover. With this method, you don’t have to create manually short videos and upload them, but you can do it directly from your WordPress site.
Just insert the URL of any public YouTube or Vimeo videos, and you will be able to generate a short video preview of a maximum of 15 seconds.
This feature works only with videos shorter than 15 minutes
If a Vimeo is not available for Download, then it’s not possible to generate a short preview for hover feature using GIPHY API. You need to make that specific Vimeo video available for Download. More info.
The Download button appears below the video, so you can easily know if a video will work or not to generate a hover preview.
If you have a PRO or Premium Vimeo account, you can easily control which videos are available for download:
You can easily control the duration and the start your video preview:
If you need a way to generate much quicker multiple videos, you can use the GIF Maker tool from GIPHY.
Related Articles
- Inspiro – Upgrade from Inspiro Lite (free) to Inspiro Premium
- Inspiro – Elementor Integration
- Inspiro – General Speed Tips
- Inspiro – Activating License Key
- Inspiro – Overview, Demo Content Importer, Quick Specs
- Inspiro – Changelog
- Inspiro – Recommended Plugins
- Inspiro – Setting up the Homepage
- Inspiro – How to Edit the WooCommerce Shop Page using Elementor
- Inspiro – Beaver Builder Integration
- Inspiro – Hotel Demo Set up
- Inspiro – How to Enable Elementor for Portfolio Posts and other Custom Post Types
- Inspiro – How to Change Logo, Colors and Fonts
- Inspiro – Homepage Slideshow
- Inspiro – How to Create Multiple Slideshows
- Inspiro – Video Background Support in Slideshow
- Inspiro – Video Lightbox
- Inspiro – Remove the Play icon from the Slideshow
- Inspiro – Video Background on Hover
- Inspiro – Configure Homepage (Widgetized) Template
- Inspiro – Setting-up the Portfolio (Gallery) Page
- Inspiro – How to Create Multiple Portfolios
- Inspiro – Portfolio Posts
- Inspiro – Create the Blog page
- Inspiro – Contact Form
- Inspiro – Adding Fullscreen Images in Posts
- Inspiro – Configure Widgets
- Inspiro – Configure Single Page Widget
- Inspiro – Featured Products (WooCommerce) Widget
- Inspiro – eCommerce Support (WooCommerce)
- Inspiro – Fullscreen Galleries
- Inspiro – Create a Button in Top Menu
- Inspiro – Social Icons in the Header
- Inspiro – Instagram Bar in the Footer
- Inspiro – Recommended Jetpack Features
- Inspiro – FAQ
- Inspiro – Known Problems & Conflicts