Video Gallery (Video on Hover)

Description

• video gallery, hover image will play video, use gallery section, it also supports video lightbox on click
• extra option to show video initial, hide all images
• view demo – password: abc
• buy me a coffee

#1. Install Code

#1.1. First add a Section > Choose Image > Choose section with (gallery) icon

#1.2. Hover on top right of section > Click EDIT SECTION > at Gallery > Anchor Link > enter word: video-gallery-filter01

#1.3. Hover on top right of section > Click EDIT GALLERY > Then enter category text + Video URL for all images

or this

#1.4. Hover on Page where you use Gallery > Click Gear icon

#1.5. Click Advanced > Paste this code

<!-- 10.26c15v4 Video Gallery (Video on Hover) -->
<script>
window.VideoGalleryFilterLightboxConfig = {
  sectionSelector: 'section[id*="video-gallery-filter"]',
  preload: true,
  overlayBackground: 'rgba(0, 0, 0, 0.92)',
  controlColor: '#ffffff',
  videoMaxWidth: '1200px',
  autoplayVideos: true
};
</script>
<script src="https://code.beaverhero.com/gallerys/1026c15v4videogalleryhovervideo.js"></script>

#2. Customize

#2.1. In case you want to hide Image, show video in initial, you can use this under main code

<style>
section[id*="video-gallery-filter"] figure img {
    opacity: 0 !important;
}
section[id*="video-gallery-filter"] figure iframe, section[id*="video-gallery-filter"] figure video {
    opacity: 1 !important;
}
</style>

#2.2. To have mix of photo + video, you can use this extra code under main code. Code will hide image with Image has Video URL

<style>
figure:has(iframe) img {
    opacity: 0 !important;
}
figure:has(iframe) iframe {
    opacity: 1 !important;
}
</style>

and to make video autoplay, you can change line 09 in the code

autoplayVideos: true

to this line

autoplayVideos: true,
autoplayInitial: true,